利用JQuery的$.ajax()可以很方便的調用asp.net的後台方法。
先來個簡單的執行個體熱熱身吧。
1、無參數的方法調用
C#後台代碼：
1
2 using System.Web.Services;
3 [WebMethod]
4 public static string 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);
}
});
return false ;
});
});
</ script >
運行結果：
通過firebug能很清楚地看到json返回的資料格式，所以在取資料的時候要data.d。
2、帶參數的方法調用
C#後台代碼：
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);
}
});
return false ;
});
});
</ script >
運行結果：
3、返回List集合方法的調用
C#後台代碼：
[WebMethod]
public static string sayHi( string address, string name)
{
return " Hi, " + address + " " + name;
}
代碼
[WebMethod]
public static List < string > sayHi( string address, string name)
{
List < string > list = new List < string > ();
for (
