<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../Scripts/jquery-2.1.1.js"></script> <script type="text/javascript"> //1. 使用PageMethod 方法 function GetBankName1() { var Account = document.getElementById("TextBox1").value; PageMethods.GetBankNameByAccount(Account, onSucceed); } function onSucceed(result) { document.getElementById("Label1").innerText = result; } //2. 使用AJAX 一部刷新 function GetBankName2() { var Account = $("#TextBox1").val(); $.ajax({ type: "Post", url: "GetDataFromDB.aspx/GetBankNameByAccount", //data: "{'Account':'" + Account + "','Name':'" + 456 + "'}", data: "{'Account':'" + Account + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { document.getElementById("Label1").innerText = data.d; } }); } //3. 使用一般的XML请求 function GetBankName3() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function (data) { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //document.getElementById("Label1").innerText = xmlhttp.responseText; alert(data); } } var Account = document.getElementById("TextBox1").value; xmlhttp.open("post", "GetDataFromDB.aspx/GetName", true); xmlhttp.send(); } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager> Account Number: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> Bank Name:<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <br /> <input id="Button1" type="button" value="Use Page Method" onclick="GetBankName1();" /><br /> <input id="Button2" type="button" value="Use AJAX" onclick="GetBankName2();" /> <input id="Button3" type="button" value="Use XML Request" onclick="GetBankName3();" /> </div> </form> </body> </html>
后台代码：
public partial class GetDataFromD : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Label2.Text = DateTime.Now.ToString();//检测是否实现了局部刷新 } [WebMethod] public static string GetBankNameByAccount(int Account) { string BankName = ""; using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString)) { conn.Open(); string sql = "select Name from customers where id=@Account"; SqlCommand cmd = new SqlCommand(sql,conn); SqlParameter p = new SqlParameter("@Account",Account); cmd.Parameters.Add(p); using (SqlDataReader r = cmd.ExecuteReader()) { if(r.Read()) { BankName= r[0].ToString(); } } } return BankName; } [WebMethod] public static string GetName() { return "Hello"; } }