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="">

<Id></Id>

<UserName>EWR</UserName>

<Age></Age>

<PassWord></PassWord>

<Email>RTRET</Email>

</Table>

<Table diffgr:id="Table2" msdata:rowOrder="">

<Id></Id>

<UserName>ER</UserName>

<Age></Age>

<PassWord></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></Age>

<PassWord></PassWord>

<Email>RTRET</Email>

</Users>

<Users>

<UserName>ER</UserName>

<Age></Age>

<PassWord></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[].ToString(), Age = sda[].ToString(), PassWord = sda[].ToString(),Email=sda[].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 = ; 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></Age>

<PassWord></PassWord>

<Email>@qq.com</Email>

</Users>

经过Json格式化后的数据

{"d":{"__type":"_01WebProject.Users","UserName":"jim","Age":"","PassWord":"","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 = "",

                PassWord = "",

                Email = "3333@qq.com"

            };

            hash.Add("", 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[""];

                    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返回数据的几种处理方式

最新文章

热门文章