Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
2012-10-13 16:23
981 查看
老话说的好:好记心不如烂笔头!
本着这原则,我把最近工作中遇到的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
说明:这是一种最基本的调用方式,由于调用数据类型设置为json,所以返回数据在response.d中
运行结果:
b.有参数,返回string
说明:由于调用数据类型设置为json,所以传递给web服务的参数必须严格遵守json字符串格式,否则有可能会出错
$.toJSON是引用jquery.json-2.3.min.js中的一个方法,它是把一个js类转化为json字符串
参考:https://code.google.com/p/jquery-json/
c.返回数组
说明:由于返回的是数组,所以利用$.each进行循环逐一取值
运行结果:
d.返回自定义类
说明:返回的值在js中也是一个类,所以用其属性可以访问到值
运行结果:
e.返回自定义集合类
运行结果:
f.自定义类参数调用,返回自定义类
说明: 上面例题,我演示了2种参数形成方式,个人喜欢第2种方式,不喜欢那种字符串拼接的方式
g.自定义集合类参数调用,返回自定义集合类
运行结果:
h.返回Dictionary
说明:正常情况下,Dictionary Hashtable ListDictionary 这3个类型都不可以在WebService的方法中担任参数和方法返回值,没想到这次jquery竟然调用成功!小小惊喜发现!
特别提示:Dictionary的键值必须是字符,否则会报错
运行结果:
i.返回DataSet
本文为DataSet演示了3种调用方式
返回DataSet第1种方式:
运行结果:
说明:这种方式项目中必须引用Microsoft.Web.Preview.dll,并且在Web.config配置文件中增加如下节点:
返回DataSet第2种方式:
说明:由于采用的是xml格式调用,所以在传递参数时,就采用对象的形式
返回DataSet第3种方式:
说明:web服务器端我利用Newtonsoft.Json.dll里面的JsonConvert.SerializeObject方法把DataSet序列化为json字符串
jquery客户端我利用 $.evalJSON把返回的json字符串再转化为类
关于Newtonsoft.Json.dll可以参考:http://json.codeplex.com/
本着这原则,我把最近工作中遇到的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/
相关文章推荐
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
- asp.net 使用Jquery 调用WebService返回JSON 类型数据
- 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例
- Sql2012如何将远程服务器数据库及表、表结构、表数据导入本地数据库 自定义日志记录功能,按日记录,很方便 C#常量和字段以及各种方法的语法总结 类型,对象,线程栈,托管堆在运行时的关系,以及clr如何调用静态方法,实例方法,和虚方法 asp.net webapi 自定义身份验证
- 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例
- 类型:Jquery;问题:jquery调用后台带参数方法;结果:利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
- 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
- 转:关于ASP.NET下,JQuery+AJAX使用JSON返回数据的总结
- 利用Flash Builder 4.5的数据服务功能,从Asp.net的WebService,自动生成调用代码
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法:服务器端和客户端数据类型的自动转换:复杂类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(7):服务器端和客户端数据类型的自动转换:泛型集合类型
- ASP.NET利用JQuery中的Aajax实现JSON数据后台交互
- ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
- 利用JQuery的$.ajax()调用asp.net的后台方法
- asp.net中Jquery调用Ajax与asp.net MVC框架中Jquery调用Ajax 总结
- [转]ASP.NET 2.0 AJAX中Webservice调用方法示例 (包含参数类型为DataTable的WS方法)
- 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法
- 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。