使用jQuery Ajax 請求webservice來實現更簡練的Ajax_jquery

在以往我們在做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，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！