jQuery中调用WebService方法小结


Posted in Javascript onMarch 28, 2011

个人感觉有两点是比较方便的:第一,在对WebService做ajax请求的时候,请求的url的写法是:服务地址/调用的方法名称,这样在请求的url中就确定了要调用的方法了,不必再在WebService代码中去判断ajax请求调用的是哪个方法了。第二,方法可以返回更多的数据类型,比如对象,泛型集合等;在ajax请求返回后,会自动将这些类型转换为json对象。而使用ashx的方式的话,需要先将这些类型转换为json格式的数据才能返回。

在使用jQuery调用WebService的方法的时候,只能发送post方式的请求;如果要返回json格式的数据的话,需要将contentType设置为application/json;返回的数据是以字母d为键值的json对象。
1.返回字符串类型

[WebMethod] 
public string HelloWorld() 
{ 
return "Hello World"; 
} $.ajax({ 
type: "post", 
contentType: "application/json", 
url: "UserService.asmx/HelloWorld", 
data: "{}", 
dataType: "json", 
success: function (result) { 
alert(result.d); 
} 
});

注意上面获取数据的方式:result.d,这是因为在返回的json数据格式是以d为键值的json对象。可以通过IE 9的开发人员工具,按下F12,选择网络,点击开始捕获按钮,重新刷新一下页面可以看到所有的请求列表,如下图所示:
jQuery中调用WebService方法小结
选择其中一个,点击转到详细视图,可以看到发送的请求以及响应的内容,如下图所示:
jQuery中调用WebService方法小结
根据这个相应正文的内容,我们可以看出为什么要使用result.d来获取返回的内容了。
2.返回对象类型
[WebMethod] 
public User GetUser() 
{ 
User user = new User() { Id = 1, UserName = "zhang san", Password = "123qwe" }; 
return user; 
} 
$.ajax({ 
type: "post", 
contentType: "application/json", 
url: "UserService.asmx/GetUser", 
data: "{}", 
dataType: "json", 
success: function (result) { 
alert(result.d.Id + " " + result.d.UserName); 
} 
});

3.返回泛型集合类型
[WebMethod] 
public List<User> GetUserList() 
{ 
List<User> list = new List<User>() 
{ 
new User{Id=1,UserName="zhang san",Password="asfasdf"}, 
new User{Id=2,UserName="li si",Password="3rwer"}, 
new User{Id=3,UserName="wang wu",Password="rqwe"} 
}; 
return list; 
} 
$.ajax({ 
type: "post", 
contentType: "application/json", 
url: "UserService.asmx/GetUserList", 
data: "{}", 
dataType: "json", 
success: function (result) { 
$.each(result.d, function (index, data) { 
alert(data.Id+" "+data.UserName); 
}); 
} 
});

对于泛型集合,对应的相应正文为:{"d":[{"__type":"WebServiceDemo.User","Id":1,"UserName":"zhang san","Password":"asfasdf"},{"__type":"WebServiceDemo.User","Id":2,"UserName":"li si","Password":"3rwer"},{"__type":"WebServiceDemo.User","Id":3,"UserName":"wang wu","Password":"rqwe"}]}。这时,result.d得到的是一个数组,通过each方法来遍历数组的每一项的属性值。
4.传递参数。在传递参数的时候,需要注意的是,ajax请求的参数的名称必须和WebService中的方法的名称一致,否则调用不能成功。
[WebMethod] 
public string Hello(string name) 
{ 
return "Hello " + name; 
} 
$.ajax({ 
type: "post", 
contentType: "application/json", 
url: "UserService.asmx/Hello", 
data: "{name:'admin'}", 
dataType: "json", 
success: function (result) { 
alert(result.d); 
} 
});
Javascript 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
Javascript 遍历对象中的子对象
Jul 03 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
node.js express框架简介与实现
Jul 23 Javascript
原生JS实现天气预报
Jun 16 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 #Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 #Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 #Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 #Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 #Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 #Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 #Javascript
You might like
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
javascript 闭包疑问
2010/12/30 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python基于select实现的socket服务器
2016/04/13 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Django app配置多个数据库代码实例
2019/12/17 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
优秀求职信范文分享
2014/01/26 职场文书
工厂搬迁方案
2014/05/11 职场文书
空气的环保标语
2014/06/12 职场文书
学校宣传标语
2014/06/18 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
招商银行工作证明
2015/06/17 职场文书
儿子满月酒致辞
2015/07/29 职场文书
升学宴学生致辞
2015/09/29 职场文书
小学生反邪教心得体会
2016/01/15 职场文书