JQuery 调用WebService

2022-04-04 23:36:55

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

　　1.首先建一个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 这个节点中添加如下配置即可

码农公寓

相关文章