原文: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
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/
时间： 2024-10-23 04:21:15