JQuery 调用WebService

  以前都是Web程序调用WebService,.net把WebService封装的太简单了,所以之前都是很肤浅的用,都没有想过更深层的东西,并且只是停留在表面的添加引用和调用。

 

  1.首先建一个WebService程序

JQuery 调用WebServiceJQuery 调用WebService代码
/// <summary>
    
/// WebService1 的摘要说明
    
/// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo 
= WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(
false)]
    
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
    [System.Web.Script.Services.ScriptService]
    
public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        
public string HelloWorld()
        {
            CommonData.Json.ObjectSerialization ser 
= new CommonData.Json.ObjectSerialization();
            Student stu 
= new Student();
            stu.Id 
= 1;
            stu.Name 
= "hechen";
            
string json = ser.EntityToJson(stu);
            
return json;
        }
    }

 

  [System.Web.Script.Services.ScriptService] 这里得注意,默认情况下这个特性是注释起来的,如果想用Javascript来调用WebService 就要取消这个注释

  WebService 的内容不必多说,用Jquery调用WebService 返回肯定是一个xml。而xml是说明文件,而不是具体方法返回的值,所以我们做适当的处理。我们这里WebService方法返回的是JSON数据,以便在前台解析。下载是实体类序列化JSON的代码。

 

  2. 实体对象序列化JSON

  1 /**
  2  * 
  3  * 2009-5-26
  4  * 贺     臣
  5  * 
  6  * 将某个对象转化为Json数据格式
  7  * */
  8 using System;
  9 using System.Collections.Generic;
 10 using System.Linq;
 11 using System.Text;
 12 using System.IO;
 13 using System.Data;
 14 using System.ServiceModel.Web;
 15 using System.Runtime.Serialization;
 16 using System.Runtime.Serialization.Json;
 17 
 18 namespace CommonData.Json
 19 {
 20     public class ObjectSerialization
 21     {
 22         private object _entity;
 23 
 24         /// <summary>
 25         /// 被序列化得实体对象
 26         /// </summary>
 27         public object Entity
 28         {
 29             get { return _entity; }
 30             set { _entity = value; }
 31         }
 32 
 33         private string _jsonData;
 34 
 35         /// <summary>
 36         /// 被转化为json格式数据的对象
 37         /// </summary>
 38         public string JsonData
 39         {
 40             get { return _jsonData; }
 41             set { _jsonData = value; }
 42         }
 43 
 44         /// <summary>
 45         /// 无参数构造方法
 46         /// </summary>
 47         public ObjectSerialization()
 48         { 
 49         }
 50 
 51         /// <summary>
 52         /// 有参数构造方法
 53         /// </summary>
 54         /// <param name="entity">要被序列化得实体对象</param>
 55         public ObjectSerialization(object entity)
 56         {
 57             this._entity = entity;
 58         }
 59 
 60 
 61         /// <summary>
 62         /// 序列化实体对象
 63         /// </summary>
 64         /// <returns></returns>
 65         public string EntityToJson()
 66         {
 67             var serializer = new DataContractJsonSerializer(Entity.GetType());
 68             MemoryStream ms = new MemoryStream();
 69             serializer.WriteObject(ms, Entity);
 70             byte[] myByte = new byte[ms.Length];
 71             ms.Position = 0;
 72             ms.Read(myByte, 0, (int)ms.Length);
 73             string dataString = Encoding.UTF8.GetString(myByte);
 74             return dataString;
 75         }
 76 
 77 
 78         /// <summary>
 79         /// 序列化实体对象
 80         /// </summary>
 81         /// <param name="entity">要被序列化得实体对象</param>
 82         /// <returns></returns>
 83         public string EntityToJson(object entity)
 84         {
 85             this._entity = entity;
 86             return EntityToJson();
 87         }
 88 
 89         /// <summary>
 90         /// 将Json格式数据转换为对象
 91         /// </summary>
 92         /// <returns></returns>
 93         public T GetObjectJson<T>()
 94         {
 95             MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(JsonData));
 96             var serializer = new DataContractJsonSerializer(typeof(T));
 97             T t = (T)serializer.ReadObject(ms);
 98             return t;
 99         }
100 
101         /// <summary>
102         /// 将Json格式数据转换为对象
103         /// </summary>
104         /// <param name="jsonData">json数据格式</param>
105         /// <returns></returns>
106         public T GetObjectJson<T>(string jsonData)
107         {
108             this._jsonData = jsonData;
109             return GetObjectJson<T>();
110         }
111     }
112 }
113 

 

  注意序列化实体必须用可序列化特性修饰,如Serialiable,否则它不能序列化为JSON数据字符串

 

  3.前台程序Jquery调用

 1 <script src="jquery-1[1].2.3.min.js" type="text/javascript"></script>
 2 
 3     <script src="json2.js" type="text/javascript"></script>
 4     <script type="text/javascript">
 5         $(document).ready(function() {
 6         $("#btnClick").click(function() {
 7                 $.ajax({
 8                     url:"http://localhost:10168/WebService1.asmx/HelloWorld",
 9                     beforeSend: function(x) { 
10                       x.setRequestHeader("Content-Type", "application/json; charset=utf-8"); 
11                     },
12                     data:{},
13                     dataType:"json",
14                     type:"POST",
15                     error: function(x, e) { 
16                   alert(x.responseText); 
17                 }, 
18             complete: function(x) { 
19                       //alert(x.responseText); 
20                      } ,
21                     success:function(data){
22                        var msg=data.d;
23                        var json=JSON2.parse(msg);
24                        alert(json.id);
25                     }
26                 });
27                 
28             });
29         });
30     </script>

 

  这里进入了Jquery的核心文件和一个JSON2.js文件

  url:"http://localhost:10168/WebService1.asmx/HelloWorld"  这个是调用WebService方法的路径,HelloWorld 是WebService 中的方法。

  同时还要设置WebService请求后返回的参数格式(json),data是用于解释返回的值。这里值得注意的是data是一个json格式的字符串,而且对象名为d,所以我们用到了后面的var msg=data.d;

  如果我们要能够像JSON那个以  . 操作来访问键值,我们就使用到了 JSON2.js 中的方法将 json字符串转化为json对象,这样就可以以. 操作来访问对象了。

  如果我们需要调用带参数的WebService ,则我们可以再data 中指定传递的参数,参数名要和WebService中方法参数名相同。

 

  在这里应该说是没有问题,我在写这个例子的时候,并不是这么顺利,后来查了很多关于WebService的资料,原来我们要修改WebService中Web.config 的配置,否则我们不能以Url 那种格式访问WebService。

  配置如下:

  在System.web 这个节点中添加如下配置即可

  <webServices>
        <protocols>
          <add name="HttpGet"/>
          <add name="HttpPost"/>
        </protocols>
      </webServices>

上一篇:【ECS】控制台可以批量打开/关闭突发性能实例的无性能约束模式啦


下一篇:中小企业业务不成长的3个原因