Jquery利用ajax調用asp.net webservice的各種數據類型(總結篇)

老話說的好:好記心不如爛筆頭!

本着這原則,我把最近工作中遇到的jquery利用ajax調用web服務的各種數據類型做了一個總結！

本文章沒有什么高難度技術，就是記錄一下，匯總一下，以便以后需要時查看！

本總結牽涉的數據類型,主要有：

string,int這樣的基本數據類型

ClassA這樣的自定義類

List<ClassA>這樣的集合類型

Dictionary這樣的字典類型數據

DataSet這樣的表數據類型（這種類型數據，本文提供了3種調用方式）

 

1.前提：項目運行環境和項目引用

本文代碼全部在vs2010下運行，所有引用如下:

jquery-1.4.1.min.js

jquery.json-2.3.min.js

Newtonsoft.Json.dll

Microsoft.Web.Preview.dll

 

2.代碼說明

web服務要想被ajax成功調用，請勿忘記標記上屬性：[System.Web.Script.Services.ScriptService]

各種數據類型調用代碼如下：

a.無參數,返回string

        [WebMethod]
        public string HelloWorld ( )
        {
            return "Hello World 我來啦!";
        }

 

           $("#ButtonNO").click(function () {
                var options = {
                    type: "POST",
                    url: "WS.asmx/HelloWorld",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        $("#div_txt").text(response.d);
                    }
                }

                $.ajax(options)
            })

 

說明:這是一種最基本的調用方式,由於調用數據類型設置為json，所以返回數據在response.d中

運行結果:

 

b.有參數,返回string

        [WebMethod]
        public string Get2 ( string value3 , int year )
        {
            return string.Format ( "祝福您在{0}年里:{1}" , year , value3 );
        }

            $("#Button2").click(function () {
                //定義一個js類
                //Get2方法參數名，做類的屬性名稱
                var par = { value3: "心想事成,萬事如意", year: 2012 };

                //把對象序列化為json字符串
                var json_str = $.toJSON(par);

                var options = {
                    url: "WS.asmx/Get2",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    //由於調用類型是基於json的,所以這里傳遞的參數格式必須嚴格遵守json字符串規定
                    data: json_str,
                    success: function (response) {
                        $("#div_txt").text(response.d);
                    }
                }

                $.ajax(options)
            })

說明:由於調用數據類型設置為json,所以傳遞給web服務的參數必須嚴格遵守json字符串格式,否則有可能會出錯

$.toJSON是引用jquery.json-2.3.min.js中的一個方法,它是把一個js類轉化為json字符串

參考:https://code.google.com/p/jquery-json/

 

c.返回數組

        [WebMethod]
        public List<double> Get_Array ( int i )
        {
            List<double> list = new List<double> ( );

            for ( int j = 0 ; j < 3 ; j++ )
            {
                Random ra = new Random ( );

                double d = ra.NextDouble ( );

                list.Add ( i * d );
            }

            return list;
        }

            $("#Buttonarr").click(function () {
                var par = { i: 3 };
                //把對象序列化為json字符串
                var json_str = $.toJSON(par);

                var options = {
                    url: "WS.asmx/Get_Array",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: json_str,
                    success: function (response) {
                        $.each(response.d, function (index, va) {
                            $('#div_txt').append("第" + index + "項值=" + va + "   ");
                        })
                    }
                }

                $.ajax(options)
            })

說明:由於返回的是數組,所以利用$.each進行循環逐一取值

運行結果:

 

d.返回自定義類

    [Serializable]
    public class ClassA
    {
        public string Name
        {
            get;
            set;
        }

        public int Age
        {
            get;
            set;
        }

        public bool IsMan
        {
            get;
            set;
        }

    }

        [WebMethod]
        public ClassA GetClass ( )
        {
            return new ClassA
            {
                Name = "小妞妞" ,
                Age = 16 ,
                IsMan = false
            };
        }

            //返回自定義類
            $("#Buttonclass").click(function () {
                var options = {
                    url: "WS.asmx/GetClass",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    type: "POST",
                    //GetClass方法沒有參數,所以data可以不設置
                    //data: "{}",
                    success: function (response) {
                        var obj = response.d;
                        $("#div_txt").text("姓名:" + obj.Name + " 年紀:" + obj.Age + " 是男人:" + obj.IsMan + "  ");
                    }
                }

                $.ajax(options)
            })

說明:返回的值在js中也是一個類,所以用其屬性可以訪問到值

運行結果:

 

e.返回自定義集合類

        [WebMethod]
        public List<ClassA> GetClassArray ( )
        {
            List<ClassA> list = new List<ClassA> ( );

            list.Add ( new ClassA
            {
                Name = "小妞妞" ,
                Age = 16 ,
                IsMan = false
            } );

            list.Add ( new ClassA
            {
                Name = "和和" ,
                Age = 28 ,
                IsMan = true
            } );

            return list;
        }

            $("#Button_classs_list").click(function () {
                var options = {
                    url: "WS.asmx/GetClassArray",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    type: "POST",
                    success: function (response) {
                        //返回的對象數組
                        var arr = response.d;
                        //循環 index是索引 va是值
                        $.each(arr, function (index, va) {
                            //得對象
                            var obj = va;
                            var str = "姓名:" + obj.Name + " 年紀:" + obj.Age + " 是男人:" + obj.IsMan + "  ";
                            $('#div_txt').append("第" + index + "項值=" + str + "   ");
                        })
                    }
                }

                $.ajax(options)
            })

運行結果:

 

f.自定義類參數調用,返回自定義類

        [WebMethod]
        public ClassA Set_Class ( ClassA ca )
        {
            return new ClassA
            {
                Name = ca.Name + "名字變啦" ,
                Age = 16 + 2 ,
                IsMan = false
            };
        }

            $("#Button_setclass").click(function () {
                //自定義類參數有2種形成方式:
                //第1種是自己用字符串拼接(例如下面的變量str) 
                //第2種是先定義js類，然后用$.toJSON方法轉化為就是字符串(例如下面的變量str2) 

                //ca是方法的參數名
                var str = '{"ca":{"Name":"小高","Age":28,"IsMan":true }}';

                var obj1 = { Name: "小高", Age: 28, IsMan: true };
                var cl = new Object();
                cl.ca = obj1;

                var str2 = $.toJSON(cl);

                var options = {
                    url: "WS.asmx/Set_Class",
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "json",
                    //自定義類參數有2種形成方式
                    //data: str,
                    data: str2,
                    success: function (response) {
                        var obj = response.d;
                        $("#div_txt").text("姓名:" + obj.Name + " 年紀:" + obj.Age + " 是男人:" + obj.IsMan + "  ");
                    }
                }

                $.ajax(options)
            })

說明: 上面例題,我演示了2種參數形成方式,個人喜歡第2種方式，不喜歡那種字符串拼接的方式

 

 

g.自定義集合類參數調用,返回自定義集合類

        [WebMethod]
        public List<ClassA> Set_ClassArray ( List<ClassA> ClassAlist )
        {
            List<ClassA> li = new List<ClassA> ( );

            foreach ( ClassA item in ClassAlist )
            {
                li.Add ( new ClassA ( )
                {
                    Name = item.Name + "名字變啦,並且長大10歲!" ,
                    Age = item.Age + 10 ,
                    IsMan = !item.IsMan
                } );
            }

            return li;
        }

           $("#Button_setclassarr").click(function () {
                //ClassAlist是方法的參數名
                var str = '{"ClassAlist":[{"Name":"小高","Age":28,"IsMan":true },{"Name":"小皓","Age":16,"IsMan":false }]}';

                var obj1 = { Name: "小高", Age: 28, IsMan: true };
                var obj2 = { Name: "小皓", Age: 16, IsMan: false };

                var li = new Array();
                li[0] = obj1;
                li[1] = obj2;

                var cl = new Object();
                cl.ClassAlist = li;

                var str2 = $.toJSON(cl);

                var options = {
                    url: "WS.asmx/Set_ClassArray",
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "json",
                    //自定義類參數有2種形成方式
                    //data: str,
                    data: str2,
                    success: function (response) {
                        //返回的對象數組
                        var arr = response.d;
                        //循環
                        $.each(arr, function (index, va) {
                            //得對象
                            var obj = va;
                            var str = "姓名:" + obj.Name + " 年紀:" + obj.Age + " 是男人:" + obj.IsMan + "  ";
                            $('#div_txt').append("第" + index + "項值=" + str + "   ");
                        })
                    }
                }

                $.ajax(options)
            })

運行結果:

 

h.返回Dictionary

        [WebMethod]
        public System.Collections.Generic.Dictionary<string , ClassA> GetDictionary ( )
        {
            //鍵必須為字符型,要不會報錯
            Dictionary<string , ClassA> list = new Dictionary<string , ClassA> ( );

            list.Add ( "a" , new ClassA ( )
            {
                Name = "lele" ,
                Age = 18 ,
                IsMan = false
            } );

            list.Add ( "b" , new ClassA ( )
            {
                Name = "王二" ,
                Age = 28 ,
                IsMan = true
            } );

            return list;
        }

            $("#Button_Dictionary").click(function () {
                var options = {
                    url: "WS.asmx/GetDictionary",
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "json",
                    success: function (response) {
                        //返回的對象數組
                        var arr = response.d;
                        //循環
                        $.each(arr, function (index, va) {
                            //得對象
                            var obj = va;
                            var str = "姓名:" + obj.Name + " 年紀:" + obj.Age + " 是男人:" + obj.IsMan + "  ";
                            $('#div_txt').append("第" + index + "項值=" + str + "   ");
                        })
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // 通常 textStatus 和 errorThrown 之中
                        alert(textStatus);
                    }
                }

                $.ajax(options)
            })

說明:正常情況下,Dictionary Hashtable ListDictionary 這3個類型都不可以在WebService的方法中擔任參數和方法返回值,沒想到這次jquery竟然調用成功!小小驚喜發現！

特別提示:Dictionary的鍵值必須是字符,否則會報錯

運行結果:

 

i.返回DataSet

本文為DataSet演示了3種調用方式

 

返回DataSet第1種方式:

 

        [WebMethod]
        public DataSet GetDataSet ( string name )
        {
            DataSet ds = new DataSet ( );

            DataTable dt = new DataTable ( );
            dt.Columns.Add ( "Year" , Type.GetType ( "System.Int32" ) );
            dt.Columns.Add ( "Value" , Type.GetType ( "System.String" ) );

            dt.Rows.Add ( 2011 , name + "新年快樂" );
            dt.Rows.Add ( 2012 , name + "萬事如意" );
            dt.Rows.Add ( 2013 , name + "恭喜發財" );

            ds.Tables.Add ( dt );

            return ds;
        }

 

            //返回DataSet(第1種方式,json)
            $("#Buttonds_json").click(function () {
                var par = { name: "東莞人民" };

                var options = {
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    url: "WS.asmx/GetDataSet",
                    type: "POST",
                    data: $.toJSON(par),       //把對象序列化為json字符串
                    success: function (result) {
                        //取回來表中的行
                        var rows = result.d.tables[0].rows;

                        for (var rowIndex = 0; rowIndex < rows.length; ++rowIndex) {
                            $("#table1").append("<tr><td>" + rows[rowIndex]["Year"] + "</td><td>" + rows[rowIndex]["Value"] + "</td></tr>");
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // 通常 textStatus 和 errorThrown 之中
                        alert(textStatus);
                    }
                }

                $.ajax(options)
            })

運行結果:

說明:這種方式項目中必須引用Microsoft.Web.Preview.dll，並且在Web.config配置文件中增加如下節點:

  <system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization>
          <converters>
            <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter" />
            <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter" />
            <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter" />
          </converters>
        </jsonSerialization>
      </webServices>
    </scripting>
  </system.web.extensions>

 

 

 

返回DataSet第2種方式:

            //返回DataSet(第2種方式,xml)
            $("#Buttonds_xml").click(function () {
                var par = { name: "東莞人民" };

                var options = {
                    url: "WS.asmx/GetDataSet",
                    type: "POST",
                    //返回的類型為XML 
                    dataType: 'xml', 
                    //由於不是json，這里傳遞的參數采用對象形式
                    data: par, 
                    success: function (result) {
                        $(result).find("Table1").each(function () {
                            $("#table1").append("<tr><td>" + $(this).find("Year").text() + "</td><td>" + $(this).find("Value").text() + "</td></tr>");
                        })
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // 通常 textStatus 和 errorThrown 之中
                        alert(textStatus);
                    }
                }

                $.ajax(options)
            })

說明:由於采用的是xml格式調用,所以在傳遞參數時,就采用對象的形式

 

返回DataSet第3種方式:

        [WebMethod]
        public string GetDataSetString ( List<ClassA> ClassA_Lists )
        {
            DataSet ds = new DataSet ( );

            DataTable dt = new DataTable ( );

            dt.Columns.Add ( "Name" , Type.GetType ( "System.String" ) );
            dt.Columns.Add ( "Age" , Type.GetType ( "System.Int32" ) );
            dt.Columns.Add ( "IsMan" , Type.GetType ( "System.Boolean" ) );

            foreach ( ClassA item in ClassA_Lists )
            {
                dt.Rows.Add ( item.Name , item.Age , item.IsMan );
            }

            ds.Tables.Add ( dt );

            string str = JsonConvert.SerializeObject ( ds );

            return str;
        }

 

           //返回DataSet(第3種方式,string)
            $("#ButtonDS_string").click(function () {
                //ClassA_Lists是方法的參數名
                var str = '{"ClassA_Lists":[{"Name":"鄧偉","Age":28,"IsMan":true },{"Name":"樂樂","Age":16,"IsMan":false }]}';

                var options = {
                    url: "WS.asmx/GetDataSetString",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: str,
                    success: function (response) {
                        var obj = $.evalJSON(response.d);

                        var arr = obj.Table1;

                        //循環
                        $.each(arr, function (index, va) {
                            //得對象
                            var obj = va;
                            var str = "姓名:" + obj.Name + " 年紀:" + obj.Age + " 是男人:" + obj.IsMan + "  ";
                            $('#div_txt').append("第" + index + "項值=" + str + "   ");
                        })
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // 通常 textStatus 和 errorThrown 之中
                        alert(textStatus);
                    }
                }

                $.ajax(options)
            })

說明:web服務器端我利用Newtonsoft.Json.dll里面的JsonConvert.SerializeObject方法把DataSet序列化為json字符串

jquery客戶端我利用 $.evalJSON把返回的json字符串再轉化為類

關於Newtonsoft.Json.dll可以參考：http://json.codeplex.com/