本文详细介绍了如何在C#中使用WebMethod与AJAX进行无参数、带参数、数组和Hashtable方法的调用，并通过实例展示了前台jQuery的实现方式。
引入头文件：
using System.Web.Script.Services;
using System.EnterpriseServices;
using System.Web.Services;
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(stringstr,
string str2){
returnstr + 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 +"");
returnli;} |
前台<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(stringkey,string
value){
Hashtable hs =new
Hashtable();
hs.Add("www","yahooooooo");
hs.Add(key, value);
returnhs;} |
前台<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?<?xmlversion="1.0"encoding="utf-8"?>
<data><item>
<id>1</id>
<name>qwe</name></item><item>
<id>2</id>
<name>asd</name></item></data><?xmlversion="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;
}); }); |
扫一扫
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
