使用jQuery Ajax 請求webservice來實現(xiàn)更簡練的Ajax
在以往我們在做ajax時,都要借助于一般處理程序(.ashx)或web服務(wù)(.asmx),并且每一個請求都要建一個這樣的文件.這樣建一大堆ashx文件,比較麻煩,多了看起來也不爽.
現(xiàn)在我們可以借助webMethod方法來使ajax實現(xiàn)起來更加簡練
1,既然要用WebMethod,那肯定就少不了引用一下命名空間了
using System.Web.Services;
在這里,為方便開發(fā),我新建了一個頁面專門用于寫WebMethod方法.那樣會比較方便,也比較好管理. 如果ajax請求比較多,可以多建幾個頁面.根據(jù)頁面的名稱來作下請求的分類
例,下面貼出后臺代碼:
/// <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";
}
后臺的這個WebMethod方法要求是公共的靜態(tài)方法,方法上面注意要加上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方法都已經(jīng)寫好了.就差著調(diào)用了.這里就用JQuery吧.比較簡練
$.ajax({
type: "POST",
contentType: "application/json",
url: "WebMethodAjax.aspx/GetMissionInfoById",
data: "{id:12}",
dataType: "json",
success: function()
{
//請求成功后的回調(diào)處理.
},
error:function()
{
//請求失敗時的回調(diào)處理.
}
});
這里對Jquery的Ajax幾個參數(shù)做一下簡單的說明,type:請求的類型,這里必須用post 。WebMethod方法只接受post類型的請求
contentType:發(fā)送信息至服務(wù)器時內(nèi)容編碼類型。我們這里一定要用application/json
url:請求的服務(wù)器端處理程序的路徑,格式為"文件名(含后綴)/方法名"
data:參數(shù)列表。注意,這里的參數(shù)一定要是json格式的字符串,記住是字符串格式,如:"{aa:11,bb:22,cc:33 , ...}"。
如果你寫的不是字符串,那jquery會把它實序列化成字符串,那么在服務(wù)器端接受到的就不是json格式了,且不能為空,即使沒有參數(shù)也要寫成"{}",如上例。很多人不成功,原因就在這里。
dataType:服務(wù)器返回的數(shù)據(jù)類型。必須是json,其他的都無效。因為webservice 是一json格式返回數(shù)據(jù)的,其形式為:{"d":"......."}?! uccess:請求成功后的回調(diào)函數(shù)。你可以在這里對返回的數(shù)據(jù)做任意處理。
我們可以看到其中一些參數(shù)值是固定的,所以從復(fù)用性的角度考慮,我們可以給jquery做一個擴展,對上面的函數(shù)做一下簡單的封裝:我們建一個腳本文件叫jquery.extend.js。在里面寫一個叫ajaxWebService的方法(因為webmethod其實就是WebService嘛,故此方法對請求*.asmx也是有效的),代碼如下:
///<summary>
///jQuery原型擴展,重新封裝Ajax請求WebServeice
///</summary>
///<param name="url" type="String">處理請求的地址</param>
///<param name="dataMap" type="String">參數(shù),json格式的字符串</param>
///<param name="fnSuccess" type="Function">請求成功后的回調(diào)函數(shù)</param>
$.ajaxWebService = function(url, dataMap, fnSuccess) {
$.ajax({
type: "POST",
contentType: "application/json",
url: url,
data: dataMap,
dataType: "json",
success: fnSuccess
});
}
好了,這樣我們請求webmethod方法 就可以這樣調(diào)用了:
$.ajaxWebService("WebMethodAjax.aspx/GetMissionInfoById", "{id:12}", function(result) {//......});
下面再貼一種封裝,是以前跟一經(jīng)理時,看的他的封裝.覺得還不錯
首先也是建一個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;
}
我們在前臺的調(diào)用就比較簡單了.
var result = Invoke("WebMethodAjax.aspx/GetMissionInfoById", { "name": arguments.Value, "id": id });
不過如果用這么方式的話.在給后臺WebMethod方法傳參時要注意一點.Json的key必須跟WebMethod方法的形參一樣,還有參數(shù)的順序不可亂.否則會請求失敗.
例如后臺的方法如下:
[WebMethod]
public static string GetMissionInfoById(int Id,string name)
{
//.....
return "false";
}
我們要傳兩個參數(shù),格式就按:
[csharp] view plain copy print?
{"Id":23,"name":"study"}
以上所述是小編給大家介紹的使用Jquery Ajax 請求webservice來實現(xiàn)更簡練的Ajax,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery實現(xiàn)鼠標(biāo)單擊網(wǎng)頁文字后在文本框顯示的方法
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)單擊網(wǎng)頁文字后在文本框顯示的方法,可實現(xiàn)鼠標(biāo)點擊上方文字即可在下方勾選處文本框顯示對應(yīng)文字的效果,涉及jQuery鼠標(biāo)事件及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下2015-05-05
jQuery函數(shù)map()和each()介紹及異同點分析
這篇文章主要介紹了jQuery函數(shù)map()和each()介紹及異同點分析,需要的朋友可以參考下2014-11-11
JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table中的排序分析
從上篇文章,我們實現(xiàn)了Table分頁代碼的高效性,咱們繼續(xù)沿著這個思路,探討Table表格數(shù)據(jù)中另外一個很常見的排序問題。說到排序,我記得在asp.net中 GridView中提供了這樣的方便,只需在展示字段上加上 Sorting 這樣的屬性,基本就完成了,剩下就是服務(wù)端cs代碼的寫法了。2010-01-01
IE8下Jquery獲取select選中的值post到后臺報錯問題
IE8下出現(xiàn)的問題是直接將selectedValue post發(fā)送到后臺,后臺接收時會報錯,這是因為IE8下selectedValue當(dāng)成了數(shù)組,后臺無法識別2014-07-07
jquery清空textarea等輸入框?qū)崿F(xiàn)代碼
jquery清空textarea等輸入框在工作中很常見,接下來的代碼簡單實用,感興趣的朋友可以參考下哈,希望對你有所幫助2013-04-04

