使用jQuery Ajax 请求webservice来实现更简练的Ajax


Posted in Javascript onAugust 04, 2016

在以往我们在做ajax时,都要借助于一般处理程序(.ashx)或web服务(.asmx),并且每一个请求都要建一个这样的文件.这样建一大堆ashx文件,比较麻烦,多了看起来也不爽.

现在我们可以借助webMethod方法来使ajax实现起来更加简练

1,既然要用WebMethod,那肯定就少不了引用一下命名空间了

using System.Web.Services;

在这里,为方便开发,我新建了一个页面专门用于写WebMethod方法.那样会比较方便,也比较好管理. 如果ajax请求比较多,可以多建几个页面.根据页面的名称来作下请求的分类
例,下面贴出后台代码:

/// <summary> 
/// 根据任务ID获取任务名称,任务完成状态,任务数量 
/// </summary> 
/// <param name="id">任务ID</param> 
/// <returns></returns> 
[WebMethod] 
public static string GetMissionInfoById(int id) 
{ 
CommonService commonService = new CommonService(); 
DataTable table = commonService.GetSysMissionById(id); 
  //..... 
return "false"; 
}

后台的这个WebMethod方法要求是公共的静态方法,方法上面注意要加上WeMethod属性;如果要在这个方法里面操作Session.就得在方法上加上属性

[WebMethod(EnableSession = true)]//或[WebMethod(true)] 
public static string GetMissionInfoById(int id) 
{ 
CommonService commonService = new CommonService(); 
DataTable table = commonService.GetSysMissionById(id); 
  //..... 
return "false"; 
}

2.既然后台的WebMethod方法都已经写好了.就差着调用了.这里就用JQuery吧.比较简练

$.ajax({ 
type: "POST", 
contentType: "application/json", 
url: "WebMethodAjax.aspx/GetMissionInfoById", 
data: "{id:12}", 
dataType: "json", 
success: function() 
 { 


 //请求成功后的回调处理. 

 }, 

 error:function() 
{ 
//请求失败时的回调处理. 
} 
});

这里对Jquery的Ajax几个参数做一下简单的说明,type:请求的类型,这里必须用post 。WebMethod方法只接受post类型的请求

contentType:发送信息至服务器时内容编码类型。我们这里一定要用application/json

url:请求的服务器端处理程序的路径,格式为"文件名(含后缀)/方法名"

data:参数列表。注意,这里的参数一定要是json格式的字符串,记住是字符串格式,如:"{aa:11,bb:22,cc:33 , ...}"。

如果你写的不是字符串,那jquery会把它实序列化成字符串,那么在服务器端接受到的就不是json格式了,且不能为空,即使没有参数也要写成"{}",如上例。很多人不成功,原因就在这里。

dataType:服务器返回的数据类型。必须是json,其他的都无效。因为webservice 是一json格式返回数据的,其形式为:{"d":"......."}。

success:请求成功后的回调函数。你可以在这里对返回的数据做任意处理。

我们可以看到其中一些参数值是固定的,所以从复用性的角度考虑,我们可以给jquery做一个扩展,对上面的函数做一下简单的封装:我们建一个脚本文件叫jquery.extend.js。在里面写一个叫ajaxWebService的方法(因为webmethod其实就是WebService嘛,故此方法对请求*.asmx也是有效的),代码如下:

///<summary> 
///jQuery原型扩展,重新封装Ajax请求WebServeice 
///</summary> 
///<param name="url" type="String">处理请求的地址</param> 
///<param name="dataMap" type="String">参数,json格式的字符串</param> 
///<param name="fnSuccess" type="Function">请求成功后的回调函数</param> 
$.ajaxWebService = function(url, dataMap, fnSuccess) { 
$.ajax({ 
type: "POST", 
contentType: "application/json", 
url: url, 
data: dataMap, 
dataType: "json", 
success: fnSuccess 
}); 
}

好了,这样我们请求webmethod方法 就可以这样调用了:

$.ajaxWebService("WebMethodAjax.aspx/GetMissionInfoById", "{id:12}", function(result) {//......});

下面再贴一种封装,是以前跟一经理时,看的他的封装.觉得还不错

首先也是建一个js文件,文件名随你们起了.我这里就建了一个CommonAjax.js里面两个方法,看下面代码:

function json2str(o) { 
var arr = []; 
var fmt = function(s) { 
if (typeof s == 'object' && s != null) return json2str(s); 
return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s; 
} 
for (var i in o) arr.push("'" + i + "':" + fmt(o[i])); 
return '{' + arr.join(',') + '}'; 
} 
function Invoke(url, param) { 
var result; 
$.ajax({ 
type: "POST", 
url: url, 
async: false, 
data: json2str(param), 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
success: function(msg) { 
result = msg.d; 
}, 
error: function(r, s, e) { 
throw new Error(); 
} 
}); 
return result; 
}

我们在前台的调用就比较简单了.

var result = Invoke("WebMethodAjax.aspx/GetMissionInfoById", { "name": arguments.Value, "id": id });

不过如果用这么方式的话.在给后台WebMethod方法传参时要注意一点.Json的key必须跟WebMethod方法的形参一样,还有参数的顺序不可乱.否则会请求失败.

例如后台的方法如下:

[WebMethod] 
public static string GetMissionInfoById(int Id,string name) 
{ 
 //.....  
return "false"; 
}

我们要传两个参数,格式就按: 

[csharp] view plain copy print?
{"Id":23,"name":"study"}

以上所述是小编给大家介绍的使用Jquery Ajax 请求webservice来实现更简练的Ajax,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
js数据类型检测总结
Aug 05 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
原生js滑动轮播封装
Jul 31 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 #Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 #Javascript
JS 数字转换为大写金额的简单实例
Aug 04 #Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 #Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 #Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 #Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 #Javascript
You might like
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
twig里使用js变量的方法
2016/02/05 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
在python3中实现更新界面
2020/02/21 Python
Python如何实现的二分查找算法
2020/05/27 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
自荐信怎么写好
2013/11/11 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
服装设计师求职信
2014/06/04 职场文书
甜品店创业计划书
2014/08/14 职场文书
单位委托书怎么写
2014/09/21 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Python中Permission denied的解决方案
2021/04/02 Python