利用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 ( int i = 0 ; i < 10 ; i ++ )
{
list.Add( " Hi: " + i.ToString());
}
list.Add( " Hi: " + address + " " + name);
return list;
}
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 />
< ul id ="msg" >
</ ul >
</ 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 " ).html( "" );
$(data.d).each( function () {
$( " #msg " ).append( " <li> " + this + " </li> " );
});
$( " #msg " ).css( " color " , " #0000FF " );
},
error: function (err) {
$( " #msg " ).css( " color " , " #FF0000 " ).html( " access faield: " + err);
}
});
return false ;
});
});
</ script >
运行结果:
4、返回SortedList<tkey,tvalue>方法的调用
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 />
< ul id ="msg" >
</ ul >
</ 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 " ).html( "" );
// 这里只取部分键、值显示
$( " #msg " ).append( " <li> " + data.d[ " 0_key " ] + " </li> " );
$( " #msg " ).append( " <li> " + data.d[ " 1_key " ] + " </li> " );
$( " #msg " ).append( " <li> " + data.d[ " 2_key " ] + " </li> " );
$( " #msg " ).append( " <li> " + data.d[ " _key " ] + " </li> " );
$( " #msg " ).css( " color " , " #0000FF " );
},
error: function (err) {
$( " #msg " ).css( " color " , " #FF0000 " ).html( " access faield: " + err);
}
});
return false ;
});
});
</ script >
运行结果:
5、操作xml
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 />
< ul id ="msg" >
</ ul >
</ div >
jQuery代码:
代码
< script type ="text/javascript" >
$(document).ready(
function () {
$( " #btnClick " ).bind( " click " , function () {
$.ajax({
url: " books.xml " ,
dataType: " xml " ,
success: function (xmlData) {
$( " #msg " ).html( "" );
$(xmlData).find( " books>book " ).each( function () {
$( " #msg " ).append( " ====new book==== " );
$( " #msg " ).append( " <li>name: " + $( this ).find( " name " ).text() + " </li> " );
$( " #msg " ).append( " <li>author: " + $( this ).find( " author " ).text() + " </li> " );
$( " #msg " ).append( " <li>wordCount: " + $( this ).find( " wordCount " ).text() + " </li> " );
$( " #msg " ).append( " <li>price: " + $( this ).find( " price " ).text() + " </li> " );
});
$( " #msg " ).css( " color " , " #0000FF " );
},
error: function (err) {
$( " #msg " ).css( " color " , " #FF0000 " ).html( " access faield: " + err);
}
});
return false ;
});
});
</ script >
运行结果:
Xml文件代码:
代码
<? xml version="1.0" encoding="utf-8" ?>
< books >
< book >
< name > ASP.NET 3.5高级程序设计(第2版) </ name >
< author > 麦克唐纳博思工作室 </ author >
< wordCount > 2034000 </ wordCount >
< price > 76 </ price >
</ book >
< book >
< name > ASP.NET 3.5入门经典 </ name >
< author > (荷兰)史潘加斯(Spaanjaars,I.) </ author >
< wordCount > 1046000 </ wordCount >
< price > 78.5 </ price >
</ book >
< book >
< name > C#高级编程(第5版)上下卷 </ name >
< author > (美)内格尔(Nagel.C) 等著 </ author >
< wordCount > 24770000 </ wordCount >
< price > 124 </ price >
</ book >
< book >
< name > ASP.NET AJAX实战 </ name >
< author > (美)麦克卢尔,(美)格拉维奇,(美)欧尔 等著 </ author >
< wordCount > 511000 </ wordCount >
< price > 44 </ price >
</ book >
< book >
< name > ASP.NET程序开发范例宝典(C#)(第2版) </ name >
< author > 张跃延,苏宇,贯伟红 </ author >
< wordCount > 1419000 </ wordCount >
< price > 71.2 </ price >
</ book >
</ books >
代码
[WebMethod]
public static SortedList < string , string > sayHi( 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;
}