利用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
;
});
});
|
4、返回Hashtable方法的调用
后台<C#>:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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>:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$(
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
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
|
XMLtest.xml:
view plaincopy to clipboardprint?
<?
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
>
<?
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>:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$(
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
;
});
});
|