雖然這篇技術文章很多地方都有轉.但是我還是自己再轉一下. 當學習筆記了.
在以往我們在做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";
- }
/// <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";
- }
[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()
- {
- //請求失敗時的回調處理.
- }
- });
$.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
- });
- }
///<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) {//......});
$.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;
- }
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 });
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";
- }
[WebMethod]
public static string GetMissionInfoById(int Id,string name)
{
//.....
return "false";
}
我們要傳兩個參數,格式就按:
- {"Id":23,"name":"study"}
