前端代码(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>