Jquery+JSON+WebService使用总结

前端代码(dataTest.html)

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title></title>
  6     <script src="js/jquery-1.4.1-vsdoc.js"></script>
  7     <!--<script type="text/javascript" src="js/jquery-1.4.1-vsdoc.js"></script>-->
  8     <script type="text/javascript">
  9         
 10         $(function () {
 11             //1、webservice中将对象转换为json以字符串格式返回
 12             $("#btn").click(function () {
 13                 $.ajax({
 14                     type: "POST",
 15                     url: "data.asmx/GetUser",
 16                     data: { orderType: "asc" }, //注意这个地方的orderType是调用da.asmx（webservice）中GetUser的参数
 17                     success: function (data) {
 18                         var json = null;
 19                         try {
 20                             json = eval('(' + data.text + ')');//注意这里两边的括号不可以去掉，因为在JS中每个方法都可以作为一个类来生成对象，这里就是用简易的方式来生成json对象。
 21                             //alert(json[0].ID);//获取json对象信息
 22                             $.each(json, function (i, n) {//遍历获取json对象信息
 23                                 alert(n.ID+" "+n.Name);
 24                             });
 25                         } catch (e) {
 26                             alert("返回字符串不是json格式!");
 27                             return;
 28                         }
 29                     }
 30                 });
 31             });
 32             //2、无参数 有返回值的调用
 33             $("#btn1").click(function () {
 34                 $.ajax({
 35                     type: "POST",
 36                     contentType: "application/json; charset=utf-8",
 37                     url: "data.asmx/HelloWorld",
 38                     data: "{}",
 39                     dataType: "json",
 40                     success: function (json) { alert(json.d); },
 41                     error: function (error) {
 42                         alert("调用出错" + error.responseText);
 43                     }
 44                 });
 45             });
 46             //3、简单参数 简单返回值的调用
 47             $("#btn2").click(function () {
 48                 $.ajax({
 49                     type: "POST",
 50                     contentType: "application/json; charset=utf-8",
 51                     url: "data.asmx/SimpleReturns",
 52                     data: "{name:'张三'}",
 53                     dataType: "json",
 54                     success: function (json) { alert(json.d); },
 55                     error: function (error) {
 56                         alert("调用出错" + error.responseText);
 57                     }
 58                 });
 59             });
 60             //4、复杂参数 复杂返回值的调用
 61             $("#btn3").click(function () {
 62                 $.ajax({
 63                     type: "POST",
 64                     contentType: "application/json; charset=utf-8",
 65                     url: "data.asmx/GetStudentList",
 66                     data: "{stu:{ID:'6',Name:'ff'}}",
 67                     dataType: "json",
 68                     success: function (json) {
 69                         $.each(json.d, function (i, n) {
 70                             alert(n.ID + " " + n.Name);
 71                         });
 72                     },
 73                     error: function (error) {
 74                         alert("调用出错" + error.responseText);
 75                     }
 76                 });
 77             });
 78             //5、返回匿名对象的WebMethod的调用
 79             $("#btn4").click(function () {
 80                 $.ajax({
 81                     type: "POST",
 82                     contentType: "application/json; charset=utf-8",
 83                     url: "data.asmx/ReturnNoNameClass",
 84                     data: "{}",
 85                     dataType: "json",
 86                     success: function (json) { alert(json.d.ID); },
 87                     error: function (error) {
 88                         alert("调用出错" + error.responseText);
 89                     }
 90                 });
 91             });
 92             //6、返回DataTable(XML)
 93             $('#btn5').click(function () {
 94                 $.ajax({
 95                     type: "POST",
 96                     url: "data.asmx/ReturnXML",
 97                     data: "{}",
 98                     dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了
 99                     success: function (result) {
100                         //演示一下捕获
101                         try {
102                             $(result).find("xmltest").each(function () {
103                                 alert($(this).find("Name").text() + " " + $(this).find("Age").text());
104                             });
105                         }
106                         catch (e) {
107                             alert(e);
108                             return;
109                         }
110                     },
111                     error: function (result, status) { //如果没有上面的捕获出错会执行这里的回调函数
112                         if (status == 'error') {
113                             alert(status);
114                         }
115                     }
116                 });
117             });
118             //7、返回数组
119             $("#btn6").click(function () {
120                 $.ajax({
121                     type: "POST",
122                     contentType: "application/json; charset=utf-8",
123                     url: "data.asmx/ReturnArray",
124                     data: "{}",
125                     dataType: "json",
126                     success: function (json) {
127                         //alert(json.responseText);
128                         //var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]];
129                         //$.each(arr1, function (i, n) {
130                         //    alert(n[0] + " " + n[1]);
131                         //});
132                         $.each(json, function (i, n) {
133                             alert(n[0] + " " + n[1]);
134                         });
135                         alert(json.d);
136                         alert(json.data);
137                         alert(json.dataType);
138                         alert(json.text);
139                     },
140                     error: function (error) {
141                         alert("调用出错" + error.responseText);
142                     }
143                 });
144             });
145 
146         })
147 
148     </script>
149 </head>
150 <body>
151     <div>
152         <h1>
153             <!--Jquery+WebService+Json-->
154         </h1>
155         <hr />
156         <!--<input id="txt" type="text" size="20" runat="server" />-->
157         <input id="btn" type="button" value="1、webservice中将对象转换为json以字符串格式返回" />
158         <br /><br /><br />
159         <input id="btn1" type="button" value="2、无参数 有返回值的调用HelloWorld" />
160         <br /><br /><br />
161         <input id="btn2" type="button" value="3、简单参数 简单返回值的调用SimpleReturns" />
162         <br /><br /><br />
163         <input id="btn3" type="button" value="4、复杂参数 复杂返回值的调用GetStudentList" />
164         <br /><br /><br />
165         <input id="btn4" type="button" value="5、返回匿名对象的WebMethod的调用" />
166         <br /><br /><br />
167         <input id="btn5" type="button" value="6、返回DataTable(XML)" />
168         <br /><br /><br />
169         <input id="btn6" type="button" value="7、返回数组" />
170         <hr />
171     </div>
172 </body>
173 </html>

Webservice代码（data.asmx）

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Web;
  5 using System.Web.Services;
  6 using System.Web.Script.Serialization;
  7 using System.Data;//添加它为了方便序列化
  8 
  9 namespace WSForApp
 10 {
 11     /// <summary>
 12     /// data 的摘要说明
 13     /// </summary>
 14     [WebService(Namespace = "http://tempuri.org/")]
 15     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 16     [System.ComponentModel.ToolboxItem(false)]
 17     // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 
 18     [System.Web.Script.Services.ScriptService]
 19     public class data : System.Web.Services.WebService
 20     {
 21         [WebMethod]//1、webservice中将对象转换为json以字符串格式返回
 22         public string GetUser(string orderType)
 23         {
 24             User use1 = new User
 25             {
 26                 ID = 1,
 27                 Name = "GXW",
 28                 PWD = "123456"
 29             };
 30 
 31             User use2 = new User
 32             {
 33                 ID = 2,
 34                 Name = "GXW2",
 35                 PWD = "23456"
 36             };
 37 
 38             User use3 = new User
 39             {
 40                 ID = 3,
 41                 Name = "3GXW2",
 42                 PWD = "3456"
 43             };
 44             List<User> list = new List<User>();
 45             list.Add(use1);
 46             list.Add(use2);
 47             list.Add(use3);
 48             return ToJSON(list);
 49         }
 50         [WebMethod]//2、无参数 有返回值的调用
 51         public string HelloWorld()
 52         {
 53             return "Hello World";
 54         }
 55 
 56         [WebMethod]//3、简单参数 简单返回值的调用
 57         public string SimpleReturns(string name)
 58         {
 59             return String.Format("您的姓名是{0}", name);
 60         }
 61 
 62         [WebMethod]//4、复杂参数 复杂返回值的调用 返回集合值
 63         public List<Student> GetStudentList(Student stu)
 64         {
 65             List<Student> studentList = new List<Student>
 66             {
 67                 new Student{ID=1,Name="张三"},
 68                 new Student{ID=2,Name="李四"}
 69             };
 70             //把从客户端传来的实体放回到返回值中
 71             studentList.Add(stu);
 72             return studentList;
 73         }
 74 
 75         [WebMethod]//5、返回匿名对象的WebMethod的调用
 76         public object ReturnNoNameClass()
 77         {
 78             return new { ID = 1, Name = "张三" };
 79         }
 80 
 81         [WebMethod]//6、返回DataTable(XML)
 82         public System.Data.DataTable ReturnXML()
 83         {
 84             System.Data.DataTable dt = new System.Data.DataTable();
 85             dt.Columns.Add("Name");
 86             dt.Columns.Add("Age", typeof(int));
 87             DataRow dr = dt.NewRow();
 88             dr[0] = "wangbin";
 89             dr[1] = 11;
 90             dt.Rows.Add(dr);
 91             DataRow dr1 = dt.NewRow();
 92             dr1[0] = "lipan";
 93             dr1[1] = 22;
 94             dt.Rows.Add(dr1);
 95             dt.TableName = "xmltest";
 96             return dt;
 97         }
 98 
 99         [WebMethod]//7、数组
100         public int[] ReturnArray()
101         {
102             //Array arr={[1, 4, 3], [4, 6, 6], [7, 20, 9]};
103             //int[,,] array = new int[,,] { {{ 1, 4, 3 }}, {{ 4, 6, 6 }}, {{ 7, 20, 9 }}};
104             int[] array = new int[] { 1, 4, 3 };
105             return array;
106         }
107 
108         //对数据序列化，返回JSON格式 
109         public string ToJSON(object obj)
110         {
111             JavaScriptSerializer serializer = new JavaScriptSerializer();
112             return serializer.Serialize(obj);
113         }
114     }
115 
116     public class User
117     {
118         public int ID { get; set; }
119         public string Name { get; set; }
120         public string PWD { get; set; }
121     }
122 
123     public class Student
124     {
125         public int ID { get; set; }
126         public string Name { get; set; }
127     }
128 }

web.config

1 <webServices>
2       <protocols>
3         <add name= "HttpPost"/>
4         <add name= "HttpGet"/>
5       </protocols>
6  </webServices>