博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
阅读量：7074 次
发布时间：2019-06-28

本文共 12634 字，大约阅读时间需要 42 分钟。

老话说的好:好记心不如烂笔头!
本着这原则,我把最近工作中遇到的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
1
2
3
4
5
[WebMethod]
public string HelloWorld ( )
{
    return "Hello World 我来啦!";
}
 
1
2
3
4
5
6
7
8
9
10
11
12
13
$("#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
1         [WebMethod]
2         public string Get2 ( string value3 , int year )
3         {
4             return string.Format ( "祝福您在{0}年里:{1}" , year , value3 );
5         }
复制代码
 1             $("#Button2").click(function () {
 2                 //定义一个js类
 3                 //Get2方法参数名，做类的属性名称
 4                 var par = { value3: "心想事成,万事如意", year: 2012 };
 5 
 6                 //把对象序列化为json字符串
 7                 var json_str = $.toJSON(par);
 8 
 9                 var options = {
10                     url: "WS.asmx/Get2",
11                     type: "POST",
12                     contentType: "application/json; charset=utf-8",
13                     dataType: "json",
14                     //由于调用类型是基于json的,所以这里传递的参数格式必须严格遵守json字符串规定
15                     data: json_str,
16                     success: function (response) {
17                         $("#div_txt").text(response.d);
18                     }
19                 }
20 
21                 $.ajax(options)
22             })
复制代码
说明:由于调用数据类型设置为json,所以传递给web服务的参数必须严格遵守json字符串格式,否则有可能会出错
$.toJSON是引用jquery.json-2.3.min.js中的一个方法,它是把一个js类转化为json字符串
参考:https://code.google.com/p/jquery-json/
 
c.返回数组
复制代码
 1         [WebMethod]
 2         public List<double> Get_Array ( int i )
 3         {
 4             List<double> list = new List<double> ( );
 5 
 6             for ( int j = 0 ; j < 3 ; j++ )
 7             {
 8                 Random ra = new Random ( );
 9 
10                 double d = ra.NextDouble ( );
11 
12                 list.Add ( i * d );
13             }
14 
15             return list;
16         }
复制代码
复制代码
 1             $("#Buttonarr").click(function () {
 2                 var par = { i: 3 };
 3                 //把对象序列化为json字符串
 4                 var json_str = $.toJSON(par);
 5 
 6                 var options = {
 7                     url: "WS.asmx/Get_Array",
 8                     type: "POST",
 9                     contentType: "application/json; charset=utf-8",
10                     dataType: "json",
11                     data: json_str,
12                     success: function (response) {
13                         $.each(response.d, function (index, va) {
14                             $('#div_txt').append("第" + index + "项值=" + va + "   ");
15                         })
16                     }
17                 }
18 
19                 $.ajax(options)
20             })
复制代码
说明:由于返回的是数组,所以利用$.each进行循环逐一取值
运行结果:
 
d.返回自定义类
复制代码
 1     [Serializable]
 2     public class ClassA
 3     {
 4         public string Name
 5         {
 6             get;
 7             set;
 8         }
 9 
10         public int Age
11         {
12             get;
13             set;
14         }
15 
16         public bool IsMan
17         {
18             get;
19             set;
20         }
21 
22     }
复制代码
复制代码
 1         [WebMethod]
 2         public ClassA GetClass ( )
 3         {
 4             return new ClassA
 5             {
 6                 Name = "小妞妞" ,
 7                 Age = 16 ,
 8                 IsMan = false
 9             };
10         }
复制代码
复制代码
 1             //返回自定义类
 2             $("#Buttonclass").click(function () {
 3                 var options = {
 4                     url: "WS.asmx/GetClass",
 5                     contentType: "application/json; charset=utf-8",
 6                     dataType: "json",
 7                     type: "POST",
 8                     //GetClass方法没有参数,所以data可以不设置
 9                     //data: "{}",
10                     success: function (response) {
11                         var obj = response.d;
12                         $("#div_txt").text("姓名:" + obj.Name + " 年纪:" + obj.Age + " 是男人:" + obj.IsMan + "  ");
13                     }
14                 }
15 
16                 $.ajax(options)
17             })
复制代码
说明:返回的值在js中也是一个类,所以用其属性可以访问到值
运行结果:
 
e.返回自定义集合类
复制代码
 1         [WebMethod]
 2         public List<ClassA> GetClassArray ( )
 3         {
 4             List<ClassA> list = new List<ClassA> ( );
 5 
 6             list.Add ( new ClassA
 7             {
 8                 Name = "小妞妞" ,
 9                 Age = 16 ,
10                 IsMan = false
11             } );
12 
13             list.Add ( new ClassA
14             {
15                 Name = "和和" ,
16                 Age = 28 ,
17                 IsMan = true
18             } );
19 
20             return list;
21         }
复制代码
复制代码
 1             $("#Button_classs_list").click(function () {
 2                 var options = {
 3                     url: "WS.asmx/GetClassArray",
 4                     contentType: "application/json; charset=utf-8",
 5                     dataType: "json",
 6                     type: "POST",
 7                     success: function (response) {
 8                         //返回的对象数组
 9                         var arr = response.d;
10                         //循环 index是索引 va是值
11                         $.each(arr, function (index, va) {
12                             //得对象
13                             var obj = va;
14                             var str = "姓名:" + obj.Name + " 年纪:" + obj.Age + " 是男人:" + obj.IsMan + "  ";
15                             $('#div_txt').append("第" + index + "项值=" + str + "   ");
16                         })
17                     }
18                 }
19 
20                 $.ajax(options)
21             })
复制代码
运行结果:
 
f.自定义类参数调用,返回自定义类
复制代码
 1         [WebMethod]
 2         public ClassA Set_Class ( ClassA ca )
 3         {
 4             return new ClassA
 5             {
 6                 Name = ca.Name + "名字变啦" ,
 7                 Age = 16 + 2 ,
 8                 IsMan = false
 9             };
10         }
复制代码
复制代码
 1             $("#Button_setclass").click(function () {
 2                 //自定义类参数有2种形成方式:
 3                 //第1种是自己用字符串拼接(例如下面的变量str) 
 4                 //第2种是先定义js类，然后用$.toJSON方法转化为就是字符串(例如下面的变量str2) 
 5 
 6                 //ca是方法的参数名
 7                 var str = '{"ca":{"Name":"小高","Age":28,"IsMan":true }}';
 8 
 9                 var obj1 = { Name: "小高", Age: 28, IsMan: true };
10                 var cl = new Object();
11                 cl.ca = obj1;
12 
13                 var str2 = $.toJSON(cl);
14 
15                 var options = {
16                     url: "WS.asmx/Set_Class",
17                     contentType: "application/json; charset=utf-8",
18                     type: "POST",
19                     dataType: "json",
20                     //自定义类参数有2种形成方式
21                     //data: str,
22                     data: str2,
23                     success: function (response) {
24                         var obj = response.d;
25                         $("#div_txt").text("姓名:" + obj.Name + " 年纪:" + obj.Age + " 是男人:" + obj.IsMan + "  ");
26                     }
27                 }
28 
29                 $.ajax(options)
30             })
复制代码
说明: 上面例题,我演示了2种参数形成方式,个人喜欢第2种方式，不喜欢那种字符串拼接的方式
 
 
g.自定义集合类参数调用,返回自定义集合类
复制代码
 1         [WebMethod]
 2         public List<ClassA> Set_ClassArray ( List<ClassA> ClassAlist )
 3         {
 4             List<ClassA> li = new List<ClassA> ( );
 5 
 6             foreach ( ClassA item in ClassAlist )
 7             {
 8                 li.Add ( new ClassA ( )
 9                 {
10                     Name = item.Name + "名字变啦,并且长大10岁!" ,
11                     Age = item.Age + 10 ,
12                     IsMan = !item.IsMan
13                 } );
14             }
15 
16             return li;
17         }
复制代码
复制代码
 1            $("#Button_setclassarr").click(function () {
 2                 //ClassAlist是方法的参数名
 3                 var str = '{"ClassAlist":[{"Name":"小高","Age":28,"IsMan":true },{"Name":"小皓","Age":16,"IsMan":false }]}';
 4 
 5                 var obj1 = { Name: "小高", Age: 28, IsMan: true };
 6                 var obj2 = { Name: "小皓", Age: 16, IsMan: false };
 7 
 8                 var li = new Array();
 9                 li[0] = obj1;
10                 li[1] = obj2;
11 
12                 var cl = new Object();
13                 cl.ClassAlist = li;
14 
15                 var str2 = $.toJSON(cl);
16 
17                 var options = {
18                     url: "WS.asmx/Set_ClassArray",
19                     contentType: "application/json; charset=utf-8",
20                     type: "POST",
21                     dataType: "json",
22                     //自定义类参数有2种形成方式
23                     //data: str,
24                     data: str2,
25                     success: function (response) {
26                         //返回的对象数组
27                         var arr = response.d;
28                         //循环
29                         $.each(arr, function (index, va) {
30                             //得对象
31                             var obj = va;
32                             var str = "姓名:" + obj.Name + " 年纪:" + obj.Age + " 是男人:" + obj.IsMan + "  ";
33                             $('#div_txt').append("第" + index + "项值=" + str + "   ");
34                         })
35                     }
36                 }
37 
38                 $.ajax(options)
39             })
复制代码
运行结果:
 
h.返回Dictionary
复制代码
 1         [WebMethod]
 2         public System.Collections.Generic.Dictionary<string , ClassA> GetDictionary ( )
 3         {
 4             //键必须为字符型,要不会报错
 5             Dictionary<string , ClassA> list = new Dictionary<string , ClassA> ( );
 6 
 7             list.Add ( "a" , new ClassA ( )
 8             {
 9                 Name = "lele" ,
10                 Age = 18 ,
11                 IsMan = false
12             } );
13 
14             list.Add ( "b" , new ClassA ( )
15             {
16                 Name = "王二" ,
17                 Age = 28 ,
18                 IsMan = true
19             } );
20 
21             return list;
22         }
复制代码
复制代码
 1             $("#Button_Dictionary").click(function () {
 2                 var options = {
 3                     url: "WS.asmx/GetDictionary",
 4                     contentType: "application/json; charset=utf-8",
 5                     type: "POST",
 6                     dataType: "json",
 7                     success: function (response) {
 8                         //返回的对象数组
 9                         var arr = response.d;
10                         //循环
11                         $.each(arr, function (index, va) {
12                             //得对象
13                             var obj = va;
14                             var str = "姓名:" + obj.Name + " 年纪:" + obj.Age + " 是男人:" + obj.IsMan + "  ";
15                             $('#div_txt').append("第" + index + "项值=" + str + "   ");
16                         })
17                     },
18                     error: function (XMLHttpRequest, textStatus, errorThrown) {
19                         // 通常 textStatus 和 errorThrown 之中
20                         alert(textStatus);
21                     }
22                 }
23 
24                 $.ajax(options)
25             })
复制代码
说明:正常情况下,Dictionary Hashtable ListDictionary 这3个类型都不可以在WebService的方法中担任参数和方法返回值,没想到这次jquery竟然调用成功!小小惊喜发现！
特别提示:Dictionary的键值必须是字符,否则会报错
运行结果:
 
i.返回DataSet
本文为DataSet演示了3种调用方式
 
返回DataSet第1种方式:
 
复制代码
 1         [WebMethod]
 2         public DataSet GetDataSet ( string name )
 3         {
 4             DataSet ds = new DataSet ( );
 5 
 6             DataTable dt = new DataTable ( );
 7             dt.Columns.Add ( "Year" , Type.GetType ( "System.Int32" ) );
 8             dt.Columns.Add ( "Value" , Type.GetType ( "System.String" ) );
 9 
10             dt.Rows.Add ( 2011 , name + "新年快乐" );
11             dt.Rows.Add ( 2012 , name + "万事如意" );
12             dt.Rows.Add ( 2013 , name + "恭喜发财" );
13 
14             ds.Tables.Add ( dt );
15 
16             return ds;
17         }
复制代码
 
复制代码
 1             //返回DataSet(第1种方式,json)
 2             $("#Buttonds_json").click(function () {
 3                 var par = { name: "东莞人民" };
 4 
 5                 var options = {
 6                     contentType: "application/json; charset=utf-8",
 7                     dataType: "json",
 8                     url: "WS.asmx/GetDataSet",
 9                     type: "POST",
10                     data: $.toJSON(par),       //把对象序列化为json字符串
11                     success: function (result) {
12                         //取回来表中的行
13                         var rows = result.d.tables[0].rows;
14 
15                         for (var rowIndex = 0; rowIndex < rows.length; ++rowIndex) {
16                             $("#table1").append("<tr><td>" + rows[rowIndex]["Year"] + "</td><td>" + rows[rowIndex]["Value"] + "</td></tr>");
17                         }
18                     },
19                     error: function (XMLHttpRequest, textStatus, errorThrown) {
20                         // 通常 textStatus 和 errorThrown 之中
21                         alert(textStatus);
22                     }
23                 }
24 
25                 $.ajax(options)
26             })
复制代码
运行结果:
说明:这种方式项目中必须引用Microsoft.Web.Preview.dll，并且在Web.config配置文件中增加如下节点:
复制代码
 1   <system.web.extensions>
 2     <scripting>
 3       <webServices>
 4         <jsonSerialization>
 5           <converters>
 6             <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter" />
 7             <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter" />
 8             <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter" />
 9           </converters>
10         </jsonSerialization>
11       </webServices>
12     </scripting>
13   </system.web.extensions>
复制代码
 
 
 
返回DataSet第2种方式:
复制代码
 1             //返回DataSet(第2种方式,xml)
 2             $("#Buttonds_xml").click(function () {
 3                 var par = { name: "东莞人民" };
 4 
 5                 var options = {
 6                     url: "WS.asmx/GetDataSet",
 7                     type: "POST",
 8                     //返回的类型为XML 
 9                     dataType: 'xml', 
10                     //由于不是json，这里传递的参数采用对象形式
11                     data: par, 
12                     success: function (result) {
13                         $(result).find("Table1").each(function () {
14                             $("#table1").append("<tr><td>" + $(this).find("Year").text() + "</td><td>" + $(this).find("Value").text() + "</td></tr>");
15                         })
16                     },
17                     error: function (XMLHttpRequest, textStatus, errorThrown) {
18                         // 通常 textStatus 和 errorThrown 之中
19                         alert(textStatus);
20                     }
21                 }
22 
23                 $.ajax(options)
24             })
复制代码
说明:由于采用的是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;
        }
复制代码
 
复制代码
 1            //返回DataSet(第3种方式,string)
 2             $("#ButtonDS_string").click(function () {
 3                 //ClassA_Lists是方法的参数名
 4                 var str = '{"ClassA_Lists":[{"Name":"邓伟","Age":28,"IsMan":true },{"Name":"乐乐","Age":16,"IsMan":false }]}';
 5 
 6                 var options = {
 7                     url: "WS.asmx/GetDataSetString",
 8                     type: "POST",
 9                     contentType: "application/json; charset=utf-8",
10                     dataType: "json",
11                     data: str,
12                     success: function (response) {
13                         var obj = $.evalJSON(response.d);
14 
15                         var arr = obj.Table1;
16 
17                         //循环
18                         $.each(arr, function (index, va) {
19                             //得对象
20                             var obj = va;
21                             var str = "姓名:" + obj.Name + " 年纪:" + obj.Age + " 是男人:" + obj.IsMan + "  ";
22                             $('#div_txt').append("第" + index + "项值=" + str + "   ");
23                         })
24                     },
25                     error: function (XMLHttpRequest, textStatus, errorThrown) {
26                         // 通常 textStatus 和 errorThrown 之中
27                         alert(textStatus);
28                     }
29                 }
30 
31                 $.ajax(options)
32             })
复制代码
说明:web服务器端我利用Newtonsoft.Json.dll里面的JsonConvert.SerializeObject方法把DataSet序列化为json字符串
jquery客户端我利用 $.evalJSON把返回的json字符串再转化为类
关于Newtonsoft.Json.dll可以参考：http://json.codeplex.com/
 
 
我的系列文章
A.Sql Server2005 Transact-SQL 新兵器学习 
B.MCAD学习 
C.代码阅读总结 
D.ASP.NET状态管理 
E.DB(数据库) 
F.WAP 
G.WinForm 
H.Flex
我的好文推荐
FlexAir开源版-全球免费多人视频聊天室,免费网络远程多人视频会议系统((Flex,Fms3联合开发))<视频聊天,会议开发实例8> 
Sql Server2005 Transact-SQL 新兵器学习总结之-总结 
MS SQL数据库备份和恢复存储过程(加强版本) 
sql server中分布式查询随笔(链接服务器(sp_addlinkedserver)和远程登录映射(sp_addlinkedsrvlogin)使用小总结) 
ASP.NET2.0国际化/本地化应用程序的实现总结(多语言,多文化页面的实现) 
WAP开发资料站(最新更新) 
自定义格式字符串随笔 (IFormattable,IFormatProvider,ICustomFormatter三接口的实现) 
Mcad学习笔记之异步编程(AsyncCallback 委托,IAsyncResult接口,BeginInvoke方法,EndInvoke方法的使用小总结) 
Mcad学习笔记之通过反射调用類的方法,屬性,字段,索引器(2種方法) 
Mcad学习笔记之序列化(2进制和Soap序列 化) 
Mcad学习笔记之委托再理解(delegate的构造器,BeginInvoke,EndInvoke,Invoke4个方法的探讨) 
ASP.NET状态管理之一（概括篇） 
Flex,Fms学习笔记
banner
希望上面提到的知识对您有所提示,同时欢迎交流和指正 
作者:aierong
出处:http://www.cnblogs.com/aierong
贴子以"现状"提供且没有任何担保,同时也没有授予任何权利!
本文版权归作者所有,欢迎转载!
原创技术文章和心得,转载注明出处!这也是对原创者的尊重!
本文转自aierong博客园博客，原文链接：http://www.cnblogs.com/aierong/archive/2012/10/13/jqueryDataSetDataTablewebServicejsonajaxxml.html，如需转载请自行联系原作者
你可能感兴趣的文章
tactic remove project
查看>>
实现汉字转拼音
查看>>
太吃鸡了
查看>>
Smart2.0开发指南——开发工具
查看>>
oracle——06表查询中需要注意的一些问题
查看>>
大白话讲Zookeeper能做什么？（一）：命名服务与配置管理
查看>>
java httpclient使用socks5代理（二）使用socks5代理服务
查看>>
java实现多线程的三种方式
查看>>
汇编 输入输出字符串(最简单版)
查看>>
Submit a form with Ajax 发送邮件参考
查看>>
国外PHP和MySQL数据库代码范例分享和指南站点
查看>>
Suse Linux服务器系统下安装运行HDF相关程序
查看>>
从头编写一个 HTTP 静态资源服务器
查看>>
使用HandlerThread时遇到的问题
查看>>
Oracle存储过程基本语法介绍
查看>>
基于MyBatis3.0.6的基本操作介绍
查看>>
selenium打开chrome时，出现 "您使用的是不受支持的命令行标记:--ignore-certificate-errors""...
查看>>
Python 一行代码完成局域网文件共享
查看>>
load-on-startup
查看>>
netstat如何查看某端口是否被占用?
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2025-02-08 03:20:58   当前IP: 18.116.90.150   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我