天天看點

jQuery AJAX實作調用頁面背景方法

1.建立demo.aspx頁面。

2.首先在該頁面的背景檔案demos.aspx.cs中添加引用。

using System.Web.Services;      
3.無參數的方法調用.      
大家注意了,這個版本不能低于.net framework 2.0。2.0已下不支援的。      
背景代碼:      
[WebMethod]      
public static string SayHello()      
{      
return "Hello Ajax!";      
}      
JS代碼:      
jQuery AJAX實作調用頁面背景方法
$(function() {      
$("#btnOK").click(function() {      
$.ajax({      
//要用post方式      
type: "Post",      
//方法所在頁面和方法名      
url: "Demo.aspx/SayHello",      
contentType: "application/json; charset=utf-8",      
dataType: "json",      
success: function(data) {      
//傳回的資料用data.d擷取内容      
alert(data.d);      
},      
error: function(err) {      
alert(err);      
}      
});      
//禁用按鈕的送出      
return false;      
});      
});      
jQuery AJAX實作調用頁面背景方法
頁面代碼:      
<form id="form1" runat="server">      
<div>      
<asp:Button ID="btnOK" runat="server" Text="驗證使用者" />      
</div>      
</form>      
運作效果如下:      
jQuery AJAX實作調用頁面背景方法
3.有參數方法調用      
背景代碼:      
[WebMethod]      
public static string GetStr(string str, string str2)      
{      
return str + str2;      
}      
JS代碼:      
jQuery AJAX實作調用頁面背景方法
$(function() {      
$("#btnOK").click(function() {      
$.ajax({      
type: "Post",      
url: "demo.aspx/GetStr",      
//方法傳參的寫法一定要對,str為形參的名字,str2為第二個形參的名字      
data: "{'str':'我是','str2':'XXX'}",      
contentType: "application/json; charset=utf-8",      
dataType: "json",      
success: function(data) {      
//傳回的資料用data.d擷取内容      
alert(data.d);      
},      
error: function(err) {      
alert(err);      
}      
});      
//禁用按鈕的送出      
return false;      
});      
});      
jQuery AJAX實作調用頁面背景方法
運作效果如下:      
jQuery AJAX實作調用頁面背景方法

4.傳回數組方法

背景代碼:

jQuery AJAX實作調用頁面背景方法
[WebMethod]      
public static List<string> GetArray()      
{      
List<string> li = new List<string>();      
for (int i = 0; i < 10; i++)      
li.Add(i + "");      
return li;      
}      
jQuery AJAX實作調用頁面背景方法

JS代碼:

jQuery AJAX實作調用頁面背景方法
$(function() {      
$("#btnOK").click(function() {      
$.ajax({      
type: "Post",      
url: "demo.aspx/GetArray",      
contentType: "application/json; charset=utf-8",      
dataType: "json",      
success: function(data) {      
//插入前先清空ul      
$("#list").html("");      
//遞歸擷取資料      
$(data.d).each(function() {      
//插入結果到li裡面      
$("#list").append("<li>" + this + "</li>");      
});      
alert(data.d);      
},      
error: function(err) {      
alert(err);      
}      
});      
//禁用按鈕的送出      
return false;      
});      
});      
jQuery AJAX實作調用頁面背景方法

頁面代碼:

​<form id=​

​​

​"form1"​

​ ​

​runat=​

​"server"​

​>​

​<div>​

​<asp:Button ID=​

​"btnOK"​

​runat=​

​"server"​

​Text=​

​"驗證使用者"​

​/>​

​</div>​

​<ul id=​

​"list"​

​>​

​</ul>​

​</form>​

運作結果圖:

jQuery AJAX實作調用頁面背景方法