标签：des style blog http color io os 使用 ar
打开自己的博客仔细浏览了一番，发现已经好久没有写博客了，由于最近一直比较忙碌懈怠了好多。默默反省三分钟.......言归正传，现在就对最近在学习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)
标签：des style blog http color io os 使用 ar
原文地址：http://www.cnblogs.com/huangyangblogs/p/3998132.html
