jQuery中调用WebService方法小结_jquery

个人感觉有两点是比较方便的:第一,在对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,选择网络,点击开始捕获按钮,重新刷新一下页面可以看到所有的请求列表,如下图所示:

选择其中一个,点击转到详细视图,可以看到发送的请求以及响应的内容,如下图所示:

根据这个相应正文的内容,我们可以看出为什么要使用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);
}
});

时间: 2024-10-26 06:33:38

jQuery中调用WebService方法小结_jquery的相关文章

JQuery中节点遍历方法实例_jquery

本文实例讲述了JQuery中节点遍历方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

jQuery中Dom的基本操作小结_jquery

jquery中各个节点的基本操作 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><meta http-equiv=

JQuery解析XML的方法小结_jquery

本文实例总结了JQuery解析XML的方法.分享给大家供大家参考,具体如下: 用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://localhost/cgi/test.xml', dat

浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题_jquery

今天用firefox调试一个用jquery里面的封装的方法与后台交互的时候,firefox死活不弹窗. 而之前用谷歌浏览器顺利通过.之后发现各自浏览器对浏览器默认值的处理是不一样的.总结: 如果返回的是json,应该带上该参数,返回的是text也一样. $.post(url,param,function(data),param);//最后一个参数param对应返回信息的类型,一般要带上,避免 因不同浏览器默认设置的不同造成的问题.

jQuery AJAX 调用WebService实现代码_jquery

用jQuery调用其他项目的WebService 实现登录验证功能 html输入用户名密码: 代码 复制代码 代码如下: <table style="width: 400px"> <tr> <td style="width: 200px" class="left"> Login ID: </td> <td style="width: 200px" class="l

jquery中EasyUI使用技巧小结_jquery

combobox组件 一.禁用combobox里面的输入框 复制代码 代码如下: $("选择器").combo('textbox').attr("readonly", "readonly"); $('选择器').combobox({ editable:false ,     panelheight:300 }); 二.禁用 复制代码 代码如下: $('选择器').combobox('disable'); 三.获取选项文本和值 复制代码 代码如下:

jQuery中的$.ajax()方法应用_jquery

复制代码 代码如下: $.ajax({ type:"POST", url:"../page/user.action?userId=" + userNo, dataType:"json", data:{ "userId":userNo, "userName":username }, success:function(data){ console.info(data.items); console.dir(da

jquery中的ajax方法怎样通过JSONP进行远程调用_jquery

关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/POST url:请求地址 async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步. dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的js

在jquery中的ajax方法怎样通过JSONP进行远程调用_jquery

关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/POST url:请求地址 async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步. dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的js