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

来源：互联网发布：java split函数最后编辑：程序博客网时间：2024/05/02 12:29

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

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

1、无参数的方法调用

C#后台代码：

1 2  using System.Web.Services;3 [WebMethod]4 publicstaticstring sayHi()5     {6 return"Hi,Welcome to China!";7 }8

注意：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);                    }                });                returnfalse;            });        });    </script>

运行结果：

通过firebug能很清楚地看到json返回的数据格式，所以在取数据的时候要data.d。

2、带参数的方法调用

C#后台代码：

[WebMethod]    publicstaticstring 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);                    }                });                returnfalse;            });        });    </script>

运行结果：

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

C#后台代码：

[WebMethod]    publicstatic 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);                    }                });                returnfalse;            });        });    </script>

运行结果：

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

C#后台代码：

[WebMethod]    publicstatic 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);                    }                });                returnfalse;            });        });    </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);                    }                });                returnfalse;            });        });    </script>

运行结果：

转载自：http://www.cnblogs.com/zxhoo/archive/2011/01/30/1947752.html

阅读全文

0 0