JQuery AJAX請求aspx後臺方法

利用JQuery封裝好的AJAX來請求aspx的後臺方法，仍是比較方便的，可是要注意如下幾點：

 

  一、首先要在方法的頂部加上[WenMethod]的特性（此特性要引入using System.Web.Services;命名空間）

  二、其次方法必定要是靜態（static）方法。

 

下面我作了幾個不一樣的調用後臺方法的例子：

 

 一、不帶參數返回string方法

 

    前臺代碼：

1  //不帶參數返回string方法
2             $.ajax({
3                 type: "post",
4                 url: "後臺返回json數組.aspx/hello",
5                 contentType:"Application/json;charset=utf-8",
6                 success: function (msg) {
7                     alert(msg.d);
8                 }
9             })

View Code

  後臺代碼：

1  /// <summary>
2     /// 不帶參數返回字符串方法
3     /// </summary>
4     /// <returns></returns>
5     [WebMethod]
6     public static  string hello()
7     {
8         return "hello world!";
9     }

View Code

 

二、帶參數返回string方法

  前臺代碼：

 1 //帶參數返回string方法
 2             $.ajax({
 3                 type: "post",
 4                 url: "後臺返回json數組.aspx/sayHi",
 5                 data: "{\"name\":\"小明\",\"age\":\"18\"}",
 6                 contentType: "Application/json;charset=utf-8",
 7                 success: function (msg) {
 8                     alert(msg.d);
 9                 }
10             })

View Code

後臺代碼：

 1 /// <summary>
 2     /// 帶參數返回string方法
 3     /// </summary>
 4     /// <param name="name"></param>
 5     /// <param name="age"></param>
 6     /// <returns></returns>
 7     [WebMethod]
 8     public static string sayHi(string name ,int age)
 9     {
10         return string.Format("你們好，我叫{0}，我今年{1}歲了！",name,age);
11     }

View Code

 

 

三、後臺返回LIST集合

    前臺代碼：

 1  //後臺返回LIST集合
 2             $.ajax({
 3                 type: "post",
 4                 url: "後臺返回json數組.aspx/jiazai",
 5                 data: "{\"name\":\"小明\"}",
 6                 contentType: "Application/json; charset=utf-8",
 7                 //dataType:"json",
 8                 success: function (msg) {
 9                     $(msg.d).each(function () {
10                         alert(this);
11                     })
12                 }
13             })

View Code

    後臺代碼：

 1 /// <summary>
 2     /// 帶參數返回集合方法
 3     /// </summary>
 4     /// <param name="name"></param>
 5     /// <returns></returns>
 6     [WebMethod]
 7     public static List<string> jiazai(string name)
 8     {
 9         List<string> ls = new List<string>();
10         ls.Add(name);
11         return ls;
12     }

View Code

 

 

最後添加一個標準的寫法：前臺的額

 1 //標準的寫法：
 2 $.ajax({
 3      type: "post",
 4      dataType: "json",
 5      contentType: "application/json", //注意：WebMethod()必須加這項，不然客戶端數據不會傳到服務端
 6      data:{如上所述},//注意：data參數能夠是string個int類型
 7      url: "List.aspx/DeleteNews",//模擬web服務，提交到方法
 8      // 可選的 async:false,阻塞的異步就是同步
 9      beforeSend:function(){
10           // do something.
11           // 通常是禁用按鈕等防止用戶重複提交
12           $("#btnClick").attr({disabled:"disabled"});
13           // 或者是顯示loading圖片
14      },
15      success: function (data) {
16           alert("success: " + data.d);//注意這裏：必須經過data.d才能獲取到服務器返回的值
17           // 服務端能夠直接返回Model，也能夠返回序列化以後的字符串，若是須要反序列化：string json = JSON.parse(data.d);
18           // 有時候須要嵌套調用ajax請求，也是能夠的
19      },
20      complete: function(){
21           //do something.
22           $("#btnClick").removeAttr("disabled");
23           // 隱藏loading圖片
24      }，
25      error: function (data) {
26           alert("error: " + data.d);
27      }
28 });

View Code