jQuery.ajax()调用asp.net后台方法-C#.Net教程-PHP中文网

jQuery.ajax()调用asp.net后台方法

高洛峰

发布： 2016-12-16 16:13:39

原创

1854人浏览过

利用jquery的$.ajax()可以很方便的调用asp.net的后台方法。

先来个简单的实例热热身吧。

1、无参数的方法调用

C#后台代码：

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

登录后复制

注意：1.方法一定要静态方法，而且要有[WebMethod]的声明.

html代码：

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

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

登录后复制

运行结果：

jQuery.ajax()调用asp.net后台方法

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

登录后复制

运行结果

jQuery.ajax()调用asp.net后台方法

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>

登录后复制

运行结果：

jQuery.ajax()调用asp.net后台方法

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>

登录后复制

运行结果：

jQuery.ajax()调用asp.net后台方法

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>

登录后复制

运行结果：

jQuery.ajax()调用asp.net后台方法