jQuery.ajax()调用asp.net后台方法
利用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#后台代码：
[WebMethod]
public
static
string
sayHi(
string
address,
string
name)
{
return
"
Hi,
"
+
address
+
"
"
+
name;
}
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
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#后台代码：
代码
[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;
}
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
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
>
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
>
运行结果：
