jQuery.ajax()調用asp.net後台方法

利用JQuery的$.ajax()可以很方便的調用asp.net的後台方法。

先來個簡單的執行個體熱熱身吧。

1、無參數的方法調用

C#後台代碼：

using System.Web.Services;[WebMethod]    public static string sayHi()    {        return "Hi,Welcome to China!";}

注意：1.方法一定要靜態方法，而且要有[WebMethod]的聲明.

html代碼：

<div>        <asp:Button ID="btnClick" runat="server" Text="click me" />        <br />        <span id="msg"></span> </div>

jQuery代碼：

<script type="text/javascript">        $(document).ready(        function() {            $("#btnClick").bind("click", function() {                $.ajax({                    type: "post",                    url: "ajaxHandler.aspx/sayHi",                    contentType: "application/json; charset=utf-8",                    dataType: "json",                    success: function(data) {                        $("#msg").css("color", "#0000FF").html(data.d);                    },                    error: function(err) {                        $("#msg").css("color", "#FF0000").html("access faield:" + err);                    }                });                return false;            });        });    </script>

運行結果：

通過firebug能很清楚地看到json返回的資料格式，所以在取資料的時候要data.d。

2、帶參數的方法調用

C#後台代碼：

[WebMethod]    public static string sayHi(string address, string name)    {        return "Hi," + address + " " + name;    }

html代碼：

<div>        <asp:Button ID="btnClick" runat="server" Text="click me" />        address:<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>        family name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>        <br />        <span id="msg"></span></div>

jQuery代碼：

<script type="text/javascript">        $(document).ready(        function() {            $("#btnClick").bind("click", function() {                var add = $("#txtAddress").val();                var txtname = $("#txtName").val();                $.ajax({                    type: "post",                    url: "ajaxHandler.aspx/sayHi",                    data: "{'address':'" + add + "','name':'" + txtname + "'}",                    contentType: "application/json; charset=utf-8",                    dataType: "json",                    success: function(data) {                        $("#msg").css("color", "#0000FF").html(data.d);                    },                    error: function(err) {                        $("#msg").css("color", "#FF0000").html("access faield:" + err);                    }                });                return false;            });        });    </script>

運行結果

3、返回List集合方法的調用

C#後台代碼：

[WebMethod]    public static List<string> sayHi(string address, string name)    {        List<string> list = new List<string>();        for (int i = 0; i < 10; i++)        {            list.Add("Hi:" + i.ToString());        }        list.Add("Hi:" + address + " " + name);        return list;}

html代碼：

<div>        <asp:Button ID="btnClick" runat="server" Text="click me" />        address:<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>        family name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>        <br />        <ul id="msg">        </ul></div>

jQuery代碼：

<script type="text/javascript">        $(document).ready(        function() {            $("#btnClick").bind("click", function() {                var add = $("#txtAddress").val();                var txtname = $("#txtName").val();                $.ajax({                    type: "post",                    url: "ajaxHandler.aspx/sayHi",                    data: "{'address':'" + add + "','name':'" + txtname + "'}",                    contentType: "application/json; charset=utf-8",                    dataType: "json",                    success: function(data) {                        $("#msg").html("");                        $(data.d).each(function() {                            $("#msg").append("<li>" + this + "</li>");                        });                        $("#msg").css("color", "#0000FF");                    },                    error: function(err) {                        $("#msg").css("color", "#FF0000").html("access faield:" + err);                    }                });                return false;            });        });    </script>

運行結果：

4、返回SortedList<tkey,tvalue>方法的調用

C#後台代碼：

[WebMethod]    public static SortedList<string, string> sayHi(string address, string name)    {        SortedList<string, string> sl = new SortedList<string, string>();        for (int i = 0; i < 10; i++)        {            sl.Add(i.ToString() + "_key", i.ToString() + "_value");        }        sl.Add("_key", "_value " + address + " " + name);        return sl;    }

html代碼：

<div>        <asp:Button ID="btnClick" runat="server" Text="click me" />        address:<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>        family name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>        <br />        <ul id="msg">        </ul></div>

jQuery代碼：

<script type="text/javascript">        $(document).ready(        function() {            $("#btnClick").bind("click", function() {                var add = $("#txtAddress").val();                var txtname = $("#txtName").val();                $.ajax({                    type: "post",                    url: "ajaxHandler.aspx/sayHi",                    data: "{'address':'" + add + "','name':'" + txtname + "'}",                    contentType: "application/json; charset=utf-8",                    dataType: "json",                    success: function(data) {                        $("#msg").html("");                        //這裡只取部分鍵、值顯示                        $("#msg").append("<li>" + data.d["0_key"] + "</li>");                        $("#msg").append("<li>" + data.d["1_key"] + "</li>");                        $("#msg").append("<li>" + data.d["2_key"] + "</li>");                        $("#msg").append("<li>" + data.d["_key"] + "</li>");                        $("#msg").css("color", "#0000FF");                    },                    error: function(err) {                        $("#msg").css("color", "#FF0000").html("access faield:" + err);                    }                });                return false;            });        });    </script>

運行結果：

5、操作xml

Xml檔案代碼：

<?xml version="1.0" encoding="utf-8" ?><books>    <book>        <name>ASP.NET 3.5進階程式設計(第2版)</name>        <author>麥克唐納博思工作室</author>        <wordCount>2034000</wordCount>        <price>76</price>    </book>    <book>        <name>ASP.NET 3.5入門經典</name>        <author>(荷蘭)史潘加斯(Spaanjaars,I.)</author>        <wordCount>1046000</wordCount>        <price>78.5</price>    </book>    <book>        <name>C#進階編程（第5版）上下卷</name>        <author>(美)內格爾（Nagel.C）　等著</author>        <wordCount>24770000</wordCount>        <price>124</price>    </book>    <book>        <name>ASP.NET AJAX實戰</name>        <author>(美)麥克盧爾，（美）格拉維奇，（美）歐爾　等著</author>        <wordCount>511000</wordCount>        <price>44</price>    </book>    <book>        <name>ASP.NET程式開發範例寶典(C#)(第2版)</name>        <author>張躍延，蘇宇，貫偉紅</author>        <wordCount>1419000</wordCount>        <price>71.2</price>    </book></books>

html代碼：

<div>        <asp:Button ID="btnClick" runat="server" Text="click me" />        address:<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>        family name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>        <br />        <ul id="msg">        </ul></div>

jQuery代碼：

<script type="text/javascript">        $(document).ready(        function() {            $("#btnClick").bind("click", function() {                $.ajax({                    url: "books.xml",                    dataType: "xml",                    success: function(xmlData) {                        $("#msg").html("");                        $(xmlData).find("books>book").each(function() {                            $("#msg").append("====new book====");                            $("#msg").append("<li>name:" + $(this).find("name").text() + "</li>");                            $("#msg").append("<li>author:" + $(this).find("author").text() + "</li>");                            $("#msg").append("<li>wordCount:" + $(this).find("wordCount").text() + "</li>");                            $("#msg").append("<li>price:" + $(this).find("price").text() + "</li>");                        });                        $("#msg").css("color", "#0000FF");                    },                    error: function(err) {                        $("#msg").css("color", "#FF0000").html("access faield:" + err);                    }                });                return false;            });        });    </script>

運行結果：