Asp.net中JQuery、ajax呼叫後台方法總結

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

1、有參數的方法呼叫

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

 所知道的一種就是ajax混音器的方法。方法呼叫  

範例程式碼如下： 

前台jQuery程式碼：

<span style="font-size:18px">$(function() {  
  var browers = browersEstimate();  
  var params = &#39;{browersType:"&#39; + browers + &#39;"}&#39;;  
  $.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方法呼叫後台方法。方法必須是靜態的，方法宣告要加上特性[System.Web.Services.WebMethod()]，傳遞的參數數量也應該和方法的參數相同。無參數的方法呼叫

範例程式碼：

前台jQuery程式碼

<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>

asp.net後台方法

<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>

3、傳回陣列方法的呼叫

asp. .net 後台程式碼：

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

4、操作xml

<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>

Jquery前台程式碼：

<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>

總結

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