JQuery请求WebService返回数据的几种处理方式

浏览数：146 / 时间：2015年06月09日

打开自己的博客仔细浏览了一番，发现已经好久没有写博客了，由于最近一直比较忙碌懈怠了好多。默默反省三分钟.......言归正传，现在就对最近在学习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;
        }

View Code

我们可以直接在浏览器中访问该服务观察获得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>

View Code

处理方法：

        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("数据读取失败");
                    }
                }
            })
        }

View Code

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>

View Code

        [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;
        }

View Code

处理方法:

      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;
                }
            });
        }

View Code

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>

View Code

经过Json格式化后的数据

{"d":{"__type":"_01WebProject.Users","UserName":"jim","Age":"10","PassWord":"123456","Email":"[email protected]"}}

View Code

处理方法:

  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;
                }
            });
        }

View Code

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 = "[email protected]"
            };
            hash.Add("1", user);
            return hash;
        }

View Code

处理方式:

  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;
                }
            });
        }