1. 程式人生 > >Asp.net中ajax呼叫後臺方法

Asp.net中ajax呼叫後臺方法

1、有引數的方法呼叫

示例程式碼如下:

前臺jQuery程式碼:

$(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);      
         });    
     });

這個是jquery下Ajax方法呼叫後臺方法。

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

type方式必須是post,再有就是後臺的方法必須是靜態的,方法宣告要加上特性[System.Web.Services.WebMethod()],傳遞的引數個數也應該和方法的引數相同。

asp.net後臺方法:

   [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; 
        } 
    }

2、無引數的方法呼叫

示例程式碼:

前臺jQuery程式碼

$(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;      
    });      
});

asp.net後臺方法

[System.Web.Services.WebMethod()] 
public static string SayHello()      
{      
return "Hello Ajax!";      
}

3、返回陣列方法的呼叫

示例程式碼:

asp.net 後臺程式碼:

[System.Web.Services.WebMethod()]    
public static List GetArray()      
{      
  List li = new List();      
for (int i = 0; i < 10; i++)      
        li.Add(i + "");      
return li;      
}

前臺JQuery程式碼:

/**/      
$(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;      
    });      
});

4、返回Hashtable方法的呼叫

using System.Collections;      
[System.Web.Services.WebMethod()]     
public static Hashtable GetHash(string key,string value)      
{      
    Hashtable hs = new Hashtable(); 
    hs.Add("www", "yahooooooo");      
    hs.Add(key, value);           
    return hs;      
}

前臺JQuery程式碼:

$(function() {      
    $("#btnOK").click(function() {      
        $.ajax({      
            type: "Post",      
            url: "data.aspx/GetHash",      
            //記得加雙引號       
            data: "{ 'key': 'haha', 'value': '哈哈!' }",      
            contentType: "application/json; charset=utf-8",      
            dataType: "json",      
            success: function(data) {      
                alert("key: haha ==> "+data.d["haha"]+" key: www ==> "+data.d["www"]);      
            },      
            error: function(err) {      
                alert(err + "err");      
            }      
        });      
        //禁用按鈕的提交      
        return false;      
    });      
});  

5、操作xml

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程式碼:

$(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;      
    });      
});

6、調後臺的另外一種方法:

js程式碼示例:

    function test() { 
        var browers = browersEstimate(); 
       __doPostBack("CE_RecordData", browers); 
   }

後臺頁面程式碼示例:

protected override void OnLoad(EventArgs e) 
    { 
        base.OnLoad(e); 
        if (this.IsPostBack) 
        { 
            if ((Request.Form["__EVENTTARGET"] != null) && (Request.Form["__EVENTTARGET"] != "")) 
            { 
                if (Request.Form["__EVENTTARGET"].Substring(0, 3) == "CE_") 
                { 
                    String strEventArgument = Request.Form["__EVENTARGUMENT"]; 
                    Type type = this.GetType(); 
                    MethodInfo mi = type.GetMethod(Request.Form["__EVENTTARGET"], BindingFlags.Instance | BindingFlags.NonPublic); 
                    if (mi != null) 
                    { 
                        mi.Invoke(this, new object[] { strEventArgument }); 
                    } 
                } 
            } 
        } 
    }

    protected void CE_RecordData(string browersType) 
    {   -----你需要做的操作----- }

如上程式碼解釋:主要是js程式碼裡面的方法名要與後臺一致,方法引數個數也要一致,最重要的是頁面的OnLoad事件的重寫。在這裡面呼叫的父類的OnLoad事件,重要是利用反射獲取要呼叫的方法,和傳遞過來的引數。

type.GetMethod(Request.Form["__EVENTTARGET"], BindingFlags.Instance | BindingFlags.NonPublic);這一句裡面的引數設定不能變更。必須是例項Instance和不公開的方法。可以看到對應的 CE_RecordData方法是受保護的。