首頁 > web前端 > js教程 > 使用jQuery Ajax 請求webservice來實現更簡練的Ajax

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

高洛峰
發布: 2017-01-24 09:34:17
原創
1095 人瀏覽過

在以往我們在做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()
{
//请求失败时的回调处理.
}
});
登入後複製

   que

的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
});
}
登入後複製

   

了:

$.ajaxWebService("WebMethodAjax.aspx/GetMissionInfoById", "{id:12}", function(result) {//......});
登入後複製

下面再貼一種封裝,是以前跟一經理時,看的他的封裝.覺得還不錯

首先也是建一個js檔案,檔名隨你們起了.我這裡就建了一個CommonAjax.js裡面兩個方法,看下面程式碼:

function json2str(o) {
var arr = [];
var fmt = function(s) {
if (typeof s == &#39;object&#39; && s != null) return json2str(s);
return /^(string|number)$/.test(typeof s) ? "&#39;" + s + "&#39;" : s;
}
for (var i in o) arr.push("&#39;" + i + "&#39;:" + fmt(o[i]));
return &#39;{&#39; + arr.join(&#39;,&#39;) + &#39;}&#39;;
}
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 });
登入後複製

我們如果用傳台的話說參時要注意一點.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,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對PHP中文網的支持!

更多使用jQuery Ajax 請求webservice來實現更簡練的Ajax相關文章請關注PHP中文網!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板