老话说的好:好记心不如烂笔头!
本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的各种数据类型做了一个总结！
本文章没有什么高难度技术，就是记录一下，汇总一下，以便以后需要时查看！
本总结牵涉的数据类型,主要有：
string,int这样的基本数据类型
ClassA这样的自定义类
List<ClassA>这样的集合类型
Dictionary这样的字典类型数据
DataSet这样的表数据类型（这种类型数据，本文提供了3种调用方式）
1.前提：项目运行环境和项目引用
本文代码全部在vs下运行，所有引用如下:
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] 2public 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: }; 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字符串
参考:/p/jquery-json/
c.返回数组
复制代码 1[WebMethod] 2public 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 { 4public string Name 5{ 6 get; 7 set; 8} 9 10public int Age 11{ 12 get; 13 set; 14} 15 16public bool IsMan 17{ 18 get; 19 set; 20} 21 22 } 复制代码 复制代码 1[WebMethod] 2public 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] 2public 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//得对象 13var obj = va; 14var str = "姓名:" + obj.Name + " 年纪:" + obj.Age + " 是男人:" + obj.IsMan + " "; 15$('#div_txt').append("第" + index + "项值=" + str + " "); 16 }) 17 } 18 } 19 20 $.ajax(options) 21 }) 复制代码 运行结果:
f.自定义类参数调用,返回自定义类
复制代码 1[WebMethod] 2public 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] 2public 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//得对象 31var obj = va; 32var 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] 2public 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//得对象 13var obj = va; 14var 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] 2public 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 ( , name + "新年快乐" ); 11 dt.Rows.Add ( , name + "万事如意" ); 12 dt.Rows.Add ( , 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//得对象 20var obj = va; 21var 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可以参考：/
我的系列文章 A.Sql Server Transact-SQL 新兵器学习 B.MCAD学习 C.代码阅读总结 状态管理 E.DB(数据库) F.WAP G.WinForm H.Flex
我的好文推荐 FlexAir开源版-全球免费多人视频聊天室,免费网络远程多人视频会议系统((Flex,Fms3联合开发))<视频聊天,会议开发实例8> Sql Server Transact-SQL 新兵器学习总结之-总结 MS SQL数据库备份和恢复存储过程(加强版本) sql server中分布式查询随笔(链接服务器(sp_addlinkedserver)和远程登录映射(sp_addlinkedsrvlogin)使用小总结) 2.0国际化/本地化应用程序的实现总结(多语言,多文化页面的实现) WAP开发资料站(最新更新) 自定义格式字符串随笔 (IFormattable,IFormatProvider,ICustomFormatter三接口的实现) Mcad学习笔记之异步编程(AsyncCallback 委托,IAsyncResult接口,BeginInvoke方法,EndInvoke方法的使用小总结) Mcad学习笔记之通过反射调用類的方法,屬性,字段,索引器(2種方法) Mcad学习笔记之序列化(2进制和Soap序列 化) Mcad学习笔记之委托再理解(delegate的构造器,BeginInvoke,EndInvoke,Invoke4个方法的探讨) 状态管理之一（概括篇） Flex,Fms学习笔记
banner
希望上面提到的知识对您有所提示,同时欢迎交流和指正 作者:aierong 出处:/aierong 贴子以"现状"提供且没有任何担保,同时也没有授予任何权利! 本文版权归作者所有,欢迎转载! 原创技术文章和心得,转载注明出处!这也是对原创者的尊重!
本文转自aierong博客园博客，原文链接：/aierong/archive//10/13/jqueryDataSetDataTablewebServicejsonajaxxml.html，如需转载请自行联系原作者
如果觉得《Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)》对你有帮助，请点赞、收藏，并留下你的观点哦！
