Asp.net中JQuery、ajax調用後台方法總結

整個過程當中學習到很多知識點，瞭解了jQuery、Ajax在asp.NET中的運用，加以總結，其實原理都是一樣的，理解了一種，其他的注意很少的區別就可以了、靈活運用：

1、有參數的方法調用

範例程式碼如下：
前台jQuery代碼：
$(function() { 

知道的一種就是ajax調背景方法。

1、有參數的方法調用

範例程式碼如下：

前台jQuery代碼：

<span style="font-size:18px">$(function() {    var browers = browersEstimate();    var params = '{browersType:"' + browers + '"}';    $.ajax({        type: "POST",                   //提交方式        url: "Default.aspx/RecordData",   //提交的頁面/方法名        data: params,                   //參數（如果沒有參數：null）        dataType: "json",                   //類型        contentType: "application/json; charset=utf-8",             success: function(data) {                     //返回的資料用data.d擷取內容                       alert(data.d);                 },                 error: function(err) {                     alert(err);                });          });</span>

這個是jquery下Ajax方法調用後台方法。

這個方法有幾點需要說明：

type方式必須是post，再有就是背景方法必須是靜態，方法聲明要加上特性[System.Web.Services.WebMethod()]，傳遞的參數個數也應該和方法的參數相同。

asp.Net後台方法：

<span style="font-size:18px">  [System.Web.Services.WebMethod()]      public static void RecordData(string browersType)      {          if (BrowserControl.Counters == null)          {              BrowserControl.InitData(0);          }            if (browersType == "")          {              browersType = "Other";          }            BrowserControl.AddOneByBrowserType(browersType);          if (BrowserControl.WriteInDataBase())          {              BrowserControl.OldTotalCount = BrowserControl.Counters.Count;          }          else          {              BrowserControl.OldTotalCount = 0;          }      }</span>

2、無參數的方法調用

範例程式碼：

前台jQuery代碼

<span style="font-size:18px">$(function() {           $("#btnOK").click(function() {               $.ajax({                   //要用post方式                   type: "Post",                   //方法所在頁面和方法名                   url: "data.aspx/SayHello",                   contentType: "application/json; charset=utf-8",                   dataType: "json",                   success: function(data) {                       //返回的資料用data.d擷取內容                       alert(data.d);                   },                   error: function(err) {                       alert(err);                   }               });               //禁用按鈕的提交               return false;           });       });</span>

asp.net後台方法

<span style="font-size:18px">[System.Web.Services.WebMethod()]  public static string SayHello()       {       return "Hello Ajax!";       }</span>

3、返回數組方法的調用

樣本前台JQuery代碼：

<span style="font-size:18px">$(function() {           $("#btnOK").click(function() {               $.ajax({                   type: "Post",                   url: "data.aspx/GetArray",                   contentType: "application/json; charset=utf-8",                   dataType: "json",                   success: function(data) {                       //插入前先清空ul                       $("#list").html("");                       //遞迴擷取資料                       $(data.d).each(function() {                           //插入結果到li裡面                           $("#list").append("" + this + "");                       });                       alert(data.d);                   },                   error: function(err) {                       alert(err);                   }               });               //禁用按鈕的提交               return false;           });       });</span>

asp.net 後台代碼：asp.net 後台代碼：

<span style="font-size:18px">[System.Web.Services.WebMethod()]     public static List GetArray()       {         List li = new List();       for (int i = 0; i < 10; i++)               li.Add(i + "");       return li;       } </span>

4、操作xml

<span style="font-size:18px">xnl檔案樣本：      <?xml version="1.0" encoding="utf-8" ?>      <data>        <item>          <id>1</id>          <name>qwe</name>        </item>        <item>          <id>2</id>          <name>asd</name>        </item>      </data>       Jquery代碼：Jquery代碼：</span>

Jquery前台代碼：

<span style="font-size:18px">$(function() {           $("#btnOK").click(function() {               $.ajax({                   url: "XMLtest.xml",                   dataType: 'xml', //返回的類型為XML ，和前面的Json，不一樣了                   success: function(xml) {                       //清空list                       $("#list").html("");                       //尋找xml元素                       $(xml).find("data>item").each(function() {                            $("#list").append("id:" + $(this).find("id").text() +"");                            $("#list").append("Name:"+ $(this).find("name").text() + "");                       })                   },                   error: function(result, status) { //如果沒有上面的捕獲出錯會執行這裡的回呼函數                       alert(status);                   }               });               //禁用按鈕的提交               return false;           });       });</span>

總結

主要是我們要注意js代碼裡面的方法名要與後台一致，再有就是背景方法必須是靜態，方法聲明要加上特性[System.Web.Services.WebMethod()]，傳遞的參數個數也應該和方法的參數相同，注意這幾部分我們的調試就簡單多了，剩下的就是多多實踐、加強原理的理解了。