JavaScript调用ASP.NET服务器端方法的最简单的方法
C# 代码
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
//测试方法1
public String GetSimpleMethod(String inputData)
{
//业务处理。
return "你输入的值：" + inputData;
}
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["input"] != null)
{
Response.ClearContent();
Response.Write(GetSimpleMethod(Request.QueryString["input"]));
Response.End();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
var textBox1 = "<%=TextBox1.ClientID %>";
function GetData() {
var t = document.getElementById(textBox1);
var h = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP");
h.open("GET", "<%=Request.FilePath %>?input=" + encodeURIComponent(t.value) + "&" + Date.parse(new Date()), true);
h.setRequestHeader("Connection", "close");
h.onreadystatechange = function() {
if (h.readyState == 4) {
if (h.status == 200) {
document.getElementById("info").innerHTML = h.responseText;
}
}
}
h.send(null);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="调用服务器方法 GetSimpleMethod" OnClientClick="GetData();return false;" />
<div id="info"></div>
</form>
</body>
</html>
对于需要返回复杂的对象，则需要对对象进行序列化等的处理，可以采取下面的简单方法。使用这个方法需要注意以下3点：
1，后台方法必须标记为 [System.Web.Services.WebMethod] 属性；
2，后台方法必须是 static 类型的静态方法；
3，ScriptManager 必须设置 EnablePageMethods="true"。
ASPX 代码
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
//测试方法1
[System.Web.Services.WebMethod]
public static String GetSimpleMethod(String inputData)
{
return "你输入的值：" + inputData;
}
//测试方法2
[System.Web.Services.WebMethod]
public static System.Collections.Generic.List<BlogUser> GetListObjectMethod(int inputData)
{
System.Collections.Generic.List<BlogUser> ulist = new System.Collections.Generic.List<BlogUser>();
System.Random r = new Random();
for (int i = 0; i < 6; i++)
{
BlogUser u = new BlogUser();
u.UserName = "孟宪会" + inputData.ToString();
u.Score = r.Next(0, 100);
ulist.Add(u);
}
return ulist;
}
//用于返回的测试类。
public class BlogUser
{
public String UserName { set; get; }
public Int32 Score { set; get; }
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
var textBox1 = "<%=TextBox1.ClientID %>";
function GetData1() {
PageMethods.GetSimpleMethod(document.getElementById(textBox1).value, OnSucceeded1, OnFailed);
}
function GetData2() {
PageMethods.GetListObjectMethod(document.getElementById(textBox1).value, OnSucceeded2, OnFailed);
}
function OnSucceeded1(result, userContext, methodName) {
alert(result)
}
function OnSucceeded2(result, userContext, methodName) {
alert(result)
var html = "<table border=1>";
for (var i = 0; i < result.length; i++) {
html += "<tr>";
html += "<td>" + result[i].UserName + "</td><td>" + result[i].Score + "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("info").innerHTML = html;
}
function OnFailed(error, userContext, methodName) {
if (error !== null) {
alert("调用方法错误： " + error.get_message());
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="调用服务器方法 GetSimpleMethod" OnClientClick="GetData1();return false;" />
<asp:Button ID="Button2" runat="server" Text="调用服务器方法 GetListObjectMethod" OnClientClick="GetData2();return false;" />
<div id="info"></div>
</form>
</body>
</html>
上一篇： 认识position定位
下一篇： PHP 分页导航函数