首页 > 代码库 > JQuery请求WebService返回数据的几种处理方式
JQuery请求WebService返回数据的几种处理方式
打开自己的博客仔细浏览了一番，发现已经好久没有写博客了，由于最近一直比较忙碌懈怠了好多。默默反省三分钟.......言归正传，现在就对最近在学习webservice的过程中遇到的几种类型的问题中我的理解和解决方案。对于webservice大家肯定知道，它是一种使不同站点之间可以相互通信的技术，可以理解为一种接口。一个站点可以通过其它站点提供的webservice接口获得其它站点提供的相应服务。webservice使用起来非常小巧，轻便被很多站点所使用。对于webservice我不做过多说明，webservice的安全问题，如何使webservice更加安全，自己可以查找相关资料自行学习。此次主要讲解使用JQuery请求webservice服务，并且如何处理返回的不同格式的数据。
1.Ajax请求webservice返回DataSet格式数据，以下是测试时编写的webservice服务
[WebMethod(Description="获得用户DataSet格式数据")] public DataSet GetUserInfoDataSet() { DataSet dataSet= null; using (SqlConnection conn = new SqlConnection(@"Data Source=.\SQLEXPRESS;Initial CataLog=UserInfo;User Id=sa;Password=123")) { conn.Open(); using (SqlCommand cmd = conn.CreateCommand()) { cmd.CommandText = "select * from Users"; SqlDataAdapter sda = new SqlDataAdapter(cmd); DataSet ds = new DataSet(); sda.Fill(ds); dataSet = ds; } } return dataSet; }
我们可以直接在浏览器中访问该服务观察获得DataSet数据格式是什么样式的，然后通过js操作 结果集中包含了多个Table对象
<NewDataSet xmlns=""><Table diffgr:id="Table1" msdata:rowOrder="0"><Id>13</Id><UserName>EWR</UserName><Age>34</Age><PassWord>32565</PassWord><Email>RTRET</Email></Table><Table diffgr:id="Table2" msdata:rowOrder="1"><Id>14</Id><UserName>ER</UserName><Age>23</Age><PassWord>46546</PassWord><Email>FDGDF</Email></Table></NewDataSet>
处理方法：
function getDataSet() { $.ajax({ url: "http://localhost:8793/SoapWebService.asmx/GetUserInfoDataSet", type: "POST", data: "{}", dataType: "xml", success: function (result) { var tr = "<tr align=‘center‘ style=‘background:#0094ff;color:white‘><td>用户名</td><td>年龄</td><td>密码</td><td>邮箱</td></tr>"; $(result).find("Table").each(function () { tr += "<tr><td>" + $(this).find("UserName").text() + "</td><td>" + $(this).find("Age").text() + "</td><td>" + $(this).find("PassWord").text() + "</td><td>" + $(this).find("Email").text() + "</td></tr>"; }) document.getElementById("tblist").innerHTML = tr; }, error: function (result, status) { if (status == "error") { alert("数据读取失败"); } } }) }
2.Ajax请求webservice返回Json格式数据，在生成Json数据之前 以List<object>泛型集合装载数据。Ajax在请求时注意几个方面，type：“json”,dataType:"application/json;charset=utf-8" 浏览器向服务器发出请求时，会在请求报文中加上这段内容，告诉浏览器,返回数据的格式为Json格式，这句是必不可少的。Json数据中每一行数据都是一个对象.
<ArrayOfUsers xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/"><Users><UserName>EWR</UserName><Age>34</Age><PassWord>32565</PassWord><Email>RTRET</Email></Users><Users><UserName>ER</UserName><Age>23</Age><PassWord>46546</PassWord><Email>FDGDF</Email></Users><Users></ArrayOfUsers>
[WebMethod(Description = "获得用户Json格式数据")] [ScriptMethod(UseHttpGet=false)] public List<Users> GetUserInfoJson() { List<Users> dataJson = null; using (SqlConnection conn = new SqlConnection(@"Data Source=.\SQLEXPRESS;Initial CataLog=UserInfo;User Id=sa;Password=123")) { conn.Open(); using (SqlCommand cmd = conn.CreateCommand()) { cmd.CommandText = "select * from Users"; SqlDataReader sda = cmd.ExecuteReader(); List<Users> list = new List<Users>(); while (sda.Read()) { list.Add(new Users { UserName = sda[1].ToString(), Age = sda[2].ToString(), PassWord = sda[3].ToString(),Email=sda[4].ToString() }); } dataJson = list; } } return dataJson; }
处理方法:
function GetJson() { $.ajax({ type: "post", url: ‘http://localhost:8793/SoapWebService.asmx/GetUserInfoJson‘, dataType: ‘json‘, contentType:"application/json;charset=utf-8", data: ‘{}‘, async: false, success: function (result) { var datas = result.d; var tr = "<tr align=‘center‘ style=‘background:#0094ff;color:white‘><td>用户名</td><td>年龄</td><td>密码</td><td>邮箱</td></tr>"; for (var i = 0; i < datas.length; i++) { tr += "<tr><td>" + datas[i].UserName + "</td><td>" + datas[i].Age + "</td><td>" + datas[i].PassWord + "</td><td>" + datas[i].Email + "</td></tr>"; } document.getElementById("tblist").innerHTML = tr; } }); }
3.Ajax请求webservice返回对象时的处理方法，其实也是一样 将返回的对象以Json数据格式返回
//返回的xml格式数据<Users xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/"><UserName>jim</UserName><Age>10</Age><PassWord>123456</PassWord><Email>3333@qq.com</Email></Users>
经过Json格式化后的数据
{"d":{"__type":"_01WebProject.Users","UserName":"jim","Age":"10","PassWord":"123456","Email":"3333@qq.com"}}处理方法:
function GetObj() { $.ajax({ type: "post", url: ‘http://localhost:8793/SoapWebService.asmx/GetUsersObj‘, dataType: ‘json‘, contentType: "application/json;charset=utf-8", data: ‘{}‘, async: false, success: function (result) { var datas = result.d; var tr = "<tr align=‘center‘ style=‘background:#0094ff;color:white‘><td>用户名</td><td>年龄</td><td>密码</td><td>邮箱</td></tr>"; tr += "<tr><td>" + datas.UserName + "</td><td>" + datas.Age + "</td><td>" + datas.PassWord + "</td><td>" + datas.Email + "</td></tr>"; document.getElementById("tblist").innerHTML = tr; } }); }
3.Ajax请求webservice返回Hashtable格式数据。
[WebMethod(Description = "获取Hashtable格式数据")] public Hashtable GetUserHashtable() { Hashtable hash = new Hashtable(); Users user = new Users() { UserName = "jim", Age = "10", PassWord = "123456", Email = "3333@qq.com" }; hash.Add("1", user); return hash; }
处理方式:
function GetHashtable() { $.ajax({ type: "post", url: ‘http://localhost:8793/SoapWebService.asmx/GetUserHashtable‘, dataType: ‘json‘, contentType: "application/json;charset=utf-8", data: ‘{}‘, async: false, success: function (result) { var datas = result.d["1"]; var tr = "<tr align=‘center‘ style=‘background:#0094ff;color:white‘><td>用户名</td><td>年龄</td><td>密码</td><td>邮箱</td></tr>"; tr += "<tr><td>" + datas.UserName + "</td><td>" + datas.Age + "</td><td>" + datas.PassWord + "</td><td>" + datas.Email + "</td></tr>"; document.getElementById("tblist").innerHTML = tr; } }); }
归纳总结：
总结：
1、JQuery与WebService之间以JSON作为数据交换形式的时候，contentType: "application/json; charset=utf-8"是必须指定的。
要不然WebService不知道以何种数据作为转换。
2、JQuery调用WebService返回复杂数据类型并不一定需要类型为可序列化。
3、WebService返回的JSON数据通过".d"获取如上面测试中的alert(json.d)
JQuery请求WebService返回数据的几种处理方式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。