利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
先来个简单的实例热热身吧。
1、无参数的方法调用
asp.net code:
1
2
|
<div
class
=
"cnblogs_code"
><pre><div><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http:
//www.CodeHighlighter.com/<br /><br />--><span style="color: #0000ff;">using</span><span style="color: #000000;"> System.Web.Script.Services; <br> <br>[WebMethod] <br></span><span style="color: #0000ff;">public</span><span style="color: #000000;"> </span><span style="color: #0000ff;">static</span><span style="color: #000000;"> </span><span style="color: #0000ff;">string</span><span style="color: #000000;"> SayHello() <br>{ <br> </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">Hello Ajax!</span><span style="color: #800000;">"</span><span style="color: #000000;">; <br>} </span></div></pre>
</div>
|
注意:1.方法一定要静态方法,而且要有[WebMethod]的声明
JQuery code:
///
<reference path="jquery-1.4.2-vsdoc.js"/>
$(function() { $(
"
#btnOK
"
).click(function() { $.ajax({
//
要用post方式
type:
"
Post
"
,
//
方法所在页面和方法名
url:
"
data.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
; }); });
结果:
2、带参数的方法调用
asp.net code:
using
System.Web.Script.Services; [WebMethod]
public
static
string
GetStr(
string
str,
string
str2) {
return
str
+
str2; }
JQuery code:
///
<reference path="jquery-1.4.2-vsdoc.js"/>
$(function() { $(
"
#btnOK
"
).click(function() { $.ajax({ type:
"
Post
"
, url:
"
data.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
; }); });
运行结果:
下面进入高级应用罗
3、返回数组方法的调用
asp.net code:
using
System.Web.Script.Services; [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 code:
///
<reference path="jquery-1.4.2-vsdoc.js"/>
$(function() { $(
"
#btnOK
"
).click(function() { $.ajax({ type:
"
Post
"
, url:
"
data.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
; }); });
运行结果:
4、返回Hashtable方法的调用
asp.net code:
using
System.Web.Script.Services;
using
System.Collections; [WebMethod]
public
static
Hashtable GetHash(
string
key,
string
value) { Hashtable hs
=
new
Hashtable(); hs.Add(
"
www
"
,
"
yahooooooo
"
); hs.Add(key, value);
return
hs; }
JQuery code:
///
<reference path="jquery-1.4.2-vsdoc.js"/>
$(function() { $(
"
#btnOK
"
).click(function() { $.ajax({ type:
"
Post
"
, url:
"
data.aspx/GetHash
"
,
//
记得加双引号 T_T
data:
"
{ 'key': 'haha', 'value': '哈哈!' }
"
, contentType:
"
application/json; charset=utf-8
"
, dataType:
"
json
"
, success: function(data) { alert(
"
key: haha ==>
"
+
data.d[
"
haha
"
]
+
"
\n key: www ==>
"
+
data.d[
"
www
"
]); }, error: function(err) { alert(err
+
"
err
"
); } });
//
禁用按钮的提交
return
false
; }); });
运行结果:
5、操作xml
XMLtest.xml:
<?
xml version
=
"
1.0
"
encoding
=
"
utf-8
"
?>
<
data
>
<
item
>
<
id
>
1
</
id
>
<
name
>
qwe
</
name
>
</
item
>
<
item
>
<
id
>
2
</
id
>
<
name
>
asd
</
name
>
</
item
>
</
data
>
JQuery code:
$(function() { $(
"
#btnOK
"
).click(function() { $.ajax({ url:
"
XMLtest.xml
"
, dataType:
'
xml
'
,
//
返回的类型为XML ,和前面的Json,不一样了
success: function(xml) {
//
清空list
$(
"
#list
"
).html(
""
);
//
查找xml元素
$(xml).find(
"
data>item
"
).each(function() { $(
"
#list
"
).append(
"
<li>id:
"
+
$(
this
).find(
"
id
"
).text()
+
"
</li>
"
); $(
"
#list
"
).append(
"
<li>Name:
"
+
$(
this
).find(
"
name
"
).text()
+
"
</li>
"
); }) }, error: function(result, status) {
//
如果没有上面的捕获出错会执行这里的回调函数
alert(status); } });
//
禁用按钮的提交
return
false
; }); });
运行结果: