利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
[WebMethod] 命名空间
1、无参数的方法调用, 注意：1.方法一定要静态方法，而且要有[WebMethod]的声明
后台<C#>:
|
1
2
3
4
5
6
7
|
using System.Web.Script.Services;
[WebMethod]
public static string SayHello()
{
return
"Hello Ajax!"
;
}
|
前台<jQuery>:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
$(
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、带参数的方法调用
后台<C#>:
|
1
2
3
4
5
6
7
|
using System.Web.Script.Services;
[WebMethod]
public static string GetStr(string str, string str2)
{
return
str + str2;
}
|
前台<JQuery>:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
$(
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、返回数组方法的调用
后台<C#>:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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>:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
$(
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
;
});
});
/// <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
;
});
});
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1904850
|
