原文: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> ( );

              ; j <  ; 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 =  ,
                 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 =  ,
                 IsMan = false
             } );

             list.Add ( new ClassA
             {
                 Name = "和和" ,
                 Age =  ,
                 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 =  +  ,
                 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 +  ,
                     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 =  ,
                 IsMan = false
             } );

             list.Add ( "b" , new ClassA ( )
             {
                 Name = "王二" ,
                 Age =  ,
                 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 (  , name + "新年快乐" );
             dt.Rows.Add (  , name + "万事如意" );
             dt.Rows.Add (  , 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/

Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)的更多相关文章

  1. jQuery Ajax 方法调用 Asp.Net WebService 以及调用aspx.cs中方法的详细例子

    一.jQuery Ajax 方法调用 Asp.Net WebService (引自Terry Feng) Html文件 <!DOCTYPE html PUBLIC "-//W3C//D ...

  2. JQuery ajax调用asp.net的webMethod

    本文章转载:http://www.cnblogs.com/zengxiangzhan/archive/2011/01/16/1936938.html 在vs2010中,用JQuery ajax调用as ...

  3. .Net中jQuery.ajax()调用asp.net后台方法 总结

    利用JQuery的$.ajax()调用.Net后台方法有多种方式, 不多说了  直接上代码 前台代码 <script type="text/javascript"> $ ...

  4. Asp.net中JQuery、ajax调用后台方法总结

    通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...

  5. ajax 调用asp.net后台方法

    ajax 调用asp.net后台方法  这种做法有好几种,如调用xx.asxh 页面,或者直接调用xx.aspx也面,在page_Load中进行一些判断然后调用后面的其他方法, 或者你可以直接调用we ...

  6. php soap调用asp.net webservice

    原文:php soap调用asp.net webservice 首先做一下准备工作,找到安装环境里的php.ini把;extension=php_soap.dll去掉前面的;.我这里使用的是wamp, ...

  7. 使用JQuery的Ajax调用SOAP-XML Web Services(Call SOAP-XML Web Services With jQuery Ajax)(译+摘录)

    假设有一个基于.Net的Web Service,其名称为SaveProduct POST /ProductService.asmx HTTP/1.1 Host: localhost Content-T ...

  8. iOS开发笔记 基于wsdl2objc调用asp.net WebService

    1.准备 先下载待会要用到的工具 WSDL2ObjC-0.6.zip WSDL2ObjC-0.7-pre1.zip 我用的是WSDL2ObjC-0.6.zip 1.1搭建asp.net WebServ ...

  9. Android Studio 2.3.3 调用asp.net webService实战(拒绝忽悠)

    1.路径中不能包含localhost(本来想在本机调试,就是不行,没办法发布到远程服务器) 2.必须采用异步的办法(阻塞主线程的是肯定不行了) 3.以下是全部的源代码(毫不保留) package co ...

随机推荐

  1. Sublime Text 2 快捷操作

    Sublime Text 2 包含了大量快捷操作,而且还很方便修改和追加自己喜欢的快捷键. 查看快捷键的方式也很简单: 点击菜单栏:Preferences->Key Bindings –Defa ...

  2. BZOJ 4408 主席数+找规律

    #include <cstdio> ; inline void Get_Int(int &x) { ; ') ch=getchar(); +ch-'; ch=getchar();} ...

  3. gc之四--Minor GC、Major GC和Full GC之间的区别

    针对HotSpot VM的实现,它里面的GC其实准确分类只有两大种: Partial GC:并不收集整个GC堆的模式 Young GC:只收集young gen的GC Old GC:只收集old ge ...

  4. System.MissingMethodException: 找不到方法:

    This is a problem which can occur when there is an old version of a DLL still lingering somewhere ar ...

  5. LayoutInflater的实例化

    获得 LayoutInflater 实例的三种方式 1. LayoutInflater inflater = getLayoutInflater();  //调用Activity的getLayoutI ...

  6. sql执行超时处理

    首先设置数据库的配置文件  看看效果 如果程序还是超时则在连接字符串中做出处理 不然程序会自动kind的连接进程   程序和数据库方面都要配置缺一不可

  7. Laravel分页

    Laravel使用的过程中,有些功能把前端页面的表达"写死了",比如分页的翻页按钮! 当然你会说Laravel的Bootstrap样式也很好看啊,但是实际项目中,翻页按钮常常需要满 ...

  8. openstack-ocata-仪表盘服务6

    Dashboard(horizon)是一个web接口,使得云平台管理员以及用户可以管理不同的Openstack资源以及服务.这个部署示例使用的是 Apache Web 服务器.一. 安装和配置 接下来 ...

  9. Python之Requests库的7个主要方法

    方法 说明 requests.request() 构造一个请求,支撑一下各方法的基础方法 requests.get() 获取HTML网页的主要方法 requests.head() 获取网页头信息的方法 ...

  10. 【iCore4 双核心板_FPGA】例程十七:基于FIFO的ARM+FPGA数据存取实验

    实验现象: 核心代码: int main(void) { /* USER CODE BEGIN 1 */ int i; int fsmc_read_data; ; ]; ]; char *p; /* ...