快捷導(dǎo)航

使用jQuery Ajax 請(qǐng)求webservice來(lái)實(shí)現(xiàn)更簡(jiǎn)練的Ajax

更新時(shí)間：2016年08月04日 11:10:08 作者：網(wǎng)中惆悵

以往我們?cè)谧鯽jax時(shí),都要借助于一般處理程序(.ashx)或web服務(wù)(.asmx),并且每一個(gè)請(qǐng)求都要建一個(gè)這樣的文件，非常麻煩，下面我們甩掉ashx和asmx來(lái)使用jQuery Ajax 請(qǐng)求webservice來(lái)實(shí)現(xiàn)更簡(jiǎn)練的Ajax，需要的朋友參考下

在以往我們?cè)谧鯽jax時(shí),都要借助于一般處理程序(.ashx)或web服務(wù)(.asmx),并且每一個(gè)請(qǐng)求都要建一個(gè)這樣的文件.這樣建一大堆a(bǔ)shx文件,比較麻煩,多了看起來(lái)也不爽.

現(xiàn)在我們可以借助webMethod方法來(lái)使ajax實(shí)現(xiàn)起來(lái)更加簡(jiǎn)練

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

using System.Web.Services;

在這里,為方便開(kāi)發(fā),我新建了一個(gè)頁(yè)面專門(mén)用于寫(xiě)WebMethod方法.那樣會(huì)比較方便,也比較好管理.　如果ajax請(qǐng)求比較多,可以多建幾個(gè)頁(yè)面.根據(jù)頁(yè)面的名稱來(lái)作下請(qǐng)求的分類
例,下面貼出后臺(tái)代碼:

/// <summary> 
/// 根據(jù)任務(wù)ID獲取任務(wù)名稱,任務(wù)完成狀態(tài),任務(wù)數(shù)量 
/// </summary> 
/// <param name="id">任務(wù)ID</param> 
/// <returns></returns> 
[WebMethod] 
public static string GetMissionInfoById(int id) 
{ 
CommonService commonService = new CommonService(); 
DataTable table = commonService.GetSysMissionById(id); 
　　　 //..... 
return "false"; 
}

后臺(tái)的這個(gè)WebMethod方法要求是公共的靜態(tài)方法,方法上面注意要加上WeMethod屬性;如果要在這個(gè)方法里面操作Session.就得在方法上加上屬性

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

2.既然后臺(tái)的WebMethod方法都已經(jīng)寫(xiě)好了.就差著調(diào)用了.這里就用JQuery吧.比較簡(jiǎn)練

$.ajax({ 
type: "POST", 
contentType: "application/json", 
url: "WebMethodAjax.aspx/GetMissionInfoById", 
data: "{id:12}", 
dataType: "json", 
success: function() 
　　　{ 
　　　　　//請(qǐng)求成功后的回調(diào)處理. 
　　　}, 
　　　error:function() 
{ 
//請(qǐng)求失敗時(shí)的回調(diào)處理. 
} 
});

這里對(duì)Jquery的Ajax幾個(gè)參數(shù)做一下簡(jiǎn)單的說(shuō)明，type：請(qǐng)求的類型，這里必須用post 。WebMethod方法只接受post類型的請(qǐng)求

contentType：發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型。我們這里一定要用application/json

url：請(qǐng)求的服務(wù)器端處理程序的路徑，格式為"文件名(含后綴)/方法名"

data：參數(shù)列表。注意，這里的參數(shù)一定要是json格式的字符串，記住是字符串格式，如："{aa:11,bb:22,cc:33 , ...}"。

如果你寫(xiě)的不是字符串，那jquery會(huì)把它實(shí)序列化成字符串，那么在服務(wù)器端接受到的就不是json格式了，且不能為空，即使沒(méi)有參數(shù)也要寫(xiě)成"{}"，如上例。很多人不成功，原因就在這里。

dataType：服務(wù)器返回的數(shù)據(jù)類型。必須是json，其他的都無(wú)效。因?yàn)閣ebservice 是一json格式返回?cái)?shù)據(jù)的，其形式為:{"d":"......."}。　　success：請(qǐng)求成功后的回調(diào)函數(shù)。你可以在這里對(duì)返回的數(shù)據(jù)做任意處理。

我們可以看到其中一些參數(shù)值是固定的，所以從復(fù)用性的角度考慮，我們可以給jquery做一個(gè)擴(kuò)展，對(duì)上面的函數(shù)做一下簡(jiǎn)單的封裝：我們建一個(gè)腳本文件叫jquery.extend.js。在里面寫(xiě)一個(gè)叫ajaxWebService的方法(因?yàn)閣ebmethod其實(shí)就是WebService嘛，故此方法對(duì)請(qǐng)求*.asmx也是有效的)，代碼如下：

///<summary> 
///jQuery原型擴(kuò)展，重新封裝Ajax請(qǐng)求WebServeice 
///</summary> 
///<param name="url" type="String">處理請(qǐng)求的地址</param> 
///<param name="dataMap" type="String">參數(shù)，json格式的字符串</param> 
///<param name="fnSuccess" type="Function">請(qǐng)求成功后的回調(diào)函數(shù)</param> 
$.ajaxWebService = function(url, dataMap, fnSuccess) { 
$.ajax({ 
type: "POST", 
contentType: "application/json", 
url: url, 
data: dataMap, 
dataType: "json", 
success: fnSuccess 
}); 
}

好了，這樣我們請(qǐng)求webmethod方法就可以這樣調(diào)用了：

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

下面再貼一種封裝,是以前跟一經(jīng)理時(shí),看的他的封裝.覺(jué)得還不錯(cuò)

首先也是建一個(gè)js文件,文件名隨你們起了.我這里就建了一個(gè)CommonAjax.js里面兩個(gè)方法,看下面代碼:

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; 
}

我們?cè)谇芭_(tái)的調(diào)用就比較簡(jiǎn)單了.

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

不過(guò)如果用這么方式的話.在給后臺(tái)WebMethod方法傳參時(shí)要注意一點(diǎn).Json的key必須跟WebMethod方法的形參一樣,還有參數(shù)的順序不可亂.否則會(huì)請(qǐng)求失敗.

例如后臺(tái)的方法如下:

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

我們要傳兩個(gè)參數(shù),格式就按:　

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

以上所述是小編給大家介紹的使用Jquery Ajax 請(qǐng)求webservice來(lái)實(shí)現(xiàn)更簡(jiǎn)練的Ajax，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: