DIV CSS 佈局教程網

 本篇文章主要是對jquery.Ajax()方法調用Asp.Net後台的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助

利用JQuery的$.ajax()可以很方便的調用asp.net的後台方法。 先來個簡單的實例熱熱身吧。   1、無參數的方法調用 asp.net code：    代碼如下: using System.Web.Script.Services;      [WebMethod]    public static string SayHello()    {         return "Hello Ajax!";    }   using System.Web.Script.Services;   [WebMethod] public static string SayHello() {      return "Hello Ajax!"; }      注意：1.方法一定要靜態方法，而且要有[WebMethod]的聲明   JQuery code：    代碼如下: /// <reference path="jquery-1.4.2-vsdoc.js"/>    $(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;        });    });   /// <reference path="jquery-1.4.2-vsdoc.js"/> $(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;     }); });      結果：   2、帶參數的方法調用 asp.net code：     代碼如下: using System.Web.Script.Services;      [WebMethod]    public static string GetStr(string str, string str2)    {        return str + str2;    }   using System.Web.Script.Services;   [WebMethod] public static string GetStr(string str, string str2) {     return str + str2; }      JQuery code：  代碼如下: /// <reference path="jquery-1.4.2-vsdoc.js"/>    $(function() {        $("#btnOK").click(function() {            $.ajax({                type: "Post",                url: "data.aspx/GetStr",                //方法傳參的寫法一定要對，str為形參的名字,str2為第二個形參的名字                data: "{'str':'我是','str2':'XXX'}",                contentType: "application/json; charset=utf-8",                dataType: "json",                success: function(data) {                    //返回的數據用data.d獲取內容                      alert(data.d);                },                error: function(err) {                    alert(err);                }            });              //禁用按鈕的提交            return false;        });    });   /// <reference path="jquery-1.4.2-vsdoc.js"/> $(function() {     $("#btnOK").click(function() {         $.ajax({             type: "Post",             url: "data.aspx/GetStr",             //方法傳參的寫法一定要對，str為形參的名字,str2為第二個形參的名字             data: "{'str':'我是','str2':'XXX'}",             contentType: "application/json; charset=utf-8",             dataType: "json",             success: function(data) {                 //返回的數據用data.d獲取內容                   alert(data.d);             },             error: function(err) {                 alert(err);             }         });           //禁用按鈕的提交         return false;     }); });      運行結果：   下面進入高級應用羅   3、返回數組方法的調用 asp.net code：    代碼如下: using System.Web.Script.Services;      [WebMethod]    public static List<string> GetArray()    {        List<string> li = new List<string>();          for (int i = 0; i < 10; i++)            li.Add(i + "");          return li;    }   using System.Web.Script.Services;   [WebMethod] public static List<string> GetArray() {     List<string> li = new List<string>();       for (int i = 0; i < 10; i++)         li.Add(i + "");       return li; }      JQuery code：  代碼如下: /// <reference path="jquery-1.4.2-vsdoc.js"/>    $(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("<li>" + this + "</li>");                    });                      alert(data.d);                },                error: function(err) {                    alert(err);                }            });              //禁用按鈕的提交            return false;        });    });   /// <reference path="jquery-1.4.2-vsdoc.js"/> $(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("<li>" + this + "</li>");                 });                   alert(data.d);             },             error: function(err) {                 alert(err);             }         });           //禁用按鈕的提交         return false;     }); });      運行結果：   4、返回Hashtable方法的調用 asp.net code：  代碼如下: using System.Web.Script.Services;    using System.Collections;      [WebMethod]    public static Hashtable GetHash(string key,string value)    {        Hashtable hs = new Hashtable();          hs.Add("www", "yahooooooo");        hs.Add(key, value);          return hs;    }   using System.Web.Script.Services; using System.Collections;   [WebMethod] public static Hashtable GetHash(string key,string value) {     Hashtable hs = new Hashtable();       hs.Add("www", "yahooooooo");     hs.Add(key, value);       return hs; }      JQuery code：  代碼如下: /// <reference path="jquery-1.4.2-vsdoc.js"/>    $(function() {        $("#btnOK").click(function() {            $.ajax({                type: "Post",                url: "data.aspx/GetHash",                //記得加雙引號  T_T                data: "{ 'key': 'haha', 'value': '哈哈！' }",                contentType: "application/json; charset=utf-8",                dataType: "json",                success: function(data) {                    alert("key: haha ==> "+data.d["haha"]+"n key: www ==> "+data.d["www"]);                },                error: function(err) {                    alert(err + "err");                }            });              //禁用按鈕的提交            return false;        });    });   /// <reference path="jquery-1.4.2-vsdoc.js"/> $(function() {     $("#btnOK").click(function() {         $.ajax({             type: "Post",             url: "data.aspx/GetHash",             //記得加雙引號  T_T             data: "{ 'key': 'haha', 'value': '哈哈！' }",             contentType: "application/json; charset=utf-8",             dataType: "json",             success: function(data) {                 alert("key: haha ==> "+data.d["haha"]+"n key: www ==> "+data.d["www"]);             },             error: function(err) {                 alert(err + "err");             }         });           //禁用按鈕的提交         return false;     }); });      運行結果：   5、操作xml XMLtest.xml:  代碼如下: <?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>   <?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 code: 代碼如下: $(function() {        $("#btnOK").click(function() {            $.ajax({                url: "XMLtest.xml",                dataType: 'xml', //返回的類型為XML ，和前面的Json，不一樣了                success: function(xml) {                    //清空list                    $("#list").html("");                    //查找xml元素   KVM 網上購物 毛刷 網站建設 北京快遞公司 超聲波焊接機                 $(xml).find("data>item").each(function() {                        $("#list").append("<li>id:" + $(this).find("id").text() +"</li>");                        $("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>");                    })                },                error: function(result, status) { //如果沒有上面的捕獲出錯會執行這裡的回調函數                    alert(status);                }            });              //禁用按鈕的提交            return false;        });    });   $(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("<li>id:" + $(this).find("id").text() +"</li>");                     $("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>");                 })             },             error: function(result, status) { //如果沒有上面的捕獲出錯會執行這裡的回調函數                 alert(status);             }         });           //禁用按鈕的提交         return false;     }); });