使用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 相关文章推荐
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 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日期处理函数 整型日期格式
2011/01/12 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
json的使用小结
2016/06/08 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
Ionic2开发环境搭建教程
2020/08/20 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
python实现mean-shift聚类算法
2020/06/10 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
安全检查汇报材料
2014/12/26 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
党员证明模板
2015/06/19 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技