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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
常规表格多表头查询示例
Feb 21 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
js事件触发操作实例分析
Jun 21 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 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文本缓存类实例
2019/03/22 PHP
Jquery ui css framework
2010/06/28 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
javascript模拟命名空间
2015/04/17 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
python实现划词翻译
2020/04/23 Python
Python yield使用方法示例
2013/12/04 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
python 线程的五个状态
2020/09/22 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
幼儿园实习生辞职信
2014/01/20 职场文书
求职信模板怎么做
2014/01/26 职场文书
作弊检讨书1000字
2014/02/01 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
教师岗位说明书
2015/09/30 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
Docker安装MySql8并远程访问的实现
2022/07/07 Servers