首页 > 代码库 > Jquery+JSON+WebService使用总结
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=http://www.mamicode.com/"js/jquery-1.4.1-vsdoc.js"></script> 7 <!--<script type="text/javascript" src=http://www.mamicode.com/"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=http://www.mamicode.com/"1、webservice中将对象转换为json以字符串格式返回" />158 <br /><br /><br />159 <input id="btn1" type="button" value=http://www.mamicode.com/"2、无参数 有返回值的调用HelloWorld" />160 <br /><br /><br />161 <input id="btn2" type="button" value=http://www.mamicode.com/"3、简单参数 简单返回值的调用SimpleReturns" />162 <br /><br /><br />163 <input id="btn3" type="button" value=http://www.mamicode.com/"4、复杂参数 复杂返回值的调用GetStudentList" />164 <br /><br /><br />165 <input id="btn4" type="button" value=http://www.mamicode.com/"5、返回匿名对象的WebMethod的调用" />166 <br /><br /><br />167 <input id="btn5" type="button" value=http://www.mamicode.com/"6、返回DataTable(XML)" />168 <br /><br /><br />169 <input id="btn6" type="button" value=http://www.mamicode.com/"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 User117 {118 public int ID { get; set; }119 public string Name { get; set; }120 public string PWD { get; set; }121 }122 123 public class Student124 {125 public int ID { get; set; }126 public string Name { get; set; }127 }128 }
Jquery+JSON+WebService使用总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。