利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。介意方法名不要重名
建一个WebFormAjax名aspx文件
CS
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormAjax.aspx.cs" Inherits="WebFromTest.WebFormAjax" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="Scripts/jquery-1.7.1.js"></script> <script src="Scripts/jquery-1.7.1.min.js"></script> <title></title> <script type="text/javascript"> $(document).ready( function () { $("#btnClick").bind("click", function () { $.ajax({ type: "post", url: "WebFormAjax.aspx/ajaxTest0", 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; }); $("#Button1").bind("click", function () { var add = $("#txtAddress").val(); var txtname = $("#txtName").val(); $.ajax({ type: "post", url: "WebFormAjax.aspx/ajaxTest", data: "{'address':'" + add + "','name':'" + txtname + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { $("#msg1").css("color", "#0000FF").html(data.d); }, error: function (err) { $("#msg1").css("color", "#FF0000").html("access faield:" + err); } }); return false; }); $("#Button2").bind("click", function () { var add = $("TextBox1").val(); var name = $("TextBox2").val(); $.ajax({ type: "post", url: "WebFormAjax.aspx/ajaxTestList", data: "{'address':'" + add + "','name':'" + name + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { $("#msg2").html(""); $(data.d).each(function () { $("#msg2").append("<li>" + this + "</li>"); }); $("#msg2").css("color", "#0000ff"); }, error: function (err) { $("#msg").css("color", "#FF0000").html("access faield:" + err); } }); return false; }); $("#Button3").bind("click", function () { var add = $("#TextBox3").val(); var txtname = $("#TextBox4").val(); $.ajax({ type: "post", url: "WebFormAjax.aspx/SortedList", data: "{'address':'" + add + "','name':'" + txtname + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { $("#msg3").html(""); //这里只取部分键、值显示 $("#msg3").append("<li>" + data.d["0_key"] + "</li>"); $("#msg3").append("<li>" + data.d["1_key"] + "</li>"); $("#msg3").append("<li>" + data.d["2_key"] + "</li>"); $("#msg3").append("<li>" + data.d["_key"] + "</li>"); $("#msg3").css("color", "#0000FF"); }, error: function (err) { $("#msg3").css("color", "#FF0000").html("access faield:" + err); } }); return false; }); $("#Button4").bind("click", function () { $.ajax({ url: "xml/XMLFile1.xml", dataType: "xml", success: function (xmlData) { $("#msg4").html(""); $(xmlData).find("books>book").each(function () { $("#msg4").append("====new book===="); $("#msg4").append("<li>name:" + $(this).find("name").text() + "</li>"); $("#msg4").append("<li>author:" + $(this).find("author").text() + "</li>"); $("#msg4").append("<li>wordCount:" + $(this).find("wordCount").text() + "</li>"); $("#msg4").append("<li>price:" + $(this).find("price").text() + "</li>"); }); $("#msg4").css("color", "#0000FF"); }, error: function (err) { $("#msg4").css("color", "#FF0000").html("access faield:" + err); } }); return false; }); // }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="btnClick" runat="server" Text="click me" OnClick="btnClick_Click" /> <br /> <span id="msg"></span> </div> <!--参数--> <div> <asp:Button ID="Button1" 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="msg1"></span> </div> <!--列表--> <div> <asp:Button ID="Button2" runat="server" Text="click me" /> address:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> family name:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <br /> <ul id="msg2"> </ul> <!--SortedList列表--> <div> <asp:Button ID="Button3" runat="server" Text="click me" /> address:<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> family name:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox> <br /> <ul id="msg3"> </ul> <!--XML列表--> <div> <asp:Button ID="Button4" runat="server" Text="click me" /> address:<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox> family name:<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox> <br /> <ul id="msg4"> </ul> </div> </div> </div> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.Services; namespace WebFromTest { public partial class WebFormAjax : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } [WebMethod] public static string ajaxTest0() { return "Hi,Welcome to China!"; } [WebMethod] public static string ajaxTest(string address, string name) { return "Hi," + address + " " + name; } [WebMethod] public static List<string> ajaxTestList(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; } [WebMethod] public static SortedList<string, string> SortedList(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; } protected void btnClick_Click(object sender, EventArgs e) { } } }