利用JQuery的$.ajax()调用asp.net的后台方法

来源：互联网发布：流星网络电视怎么样编辑：程序博客网时间：2024/05/17 11:36

利用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);  
            }  
        });  
 
        //禁用按钮的提交  
        returnfalse;   
    });  
});

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);  
            }  
        });  
 
        //禁用按钮的提交  
        returnfalse;   
    });  
});

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);  
            }  
        });  
 
        //禁用按钮的提交  
        returnfalse;   
    });  
}); 
/// <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);
            }
        });
 
        //禁用按钮的提交
        returnfalse;
    });
});

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");  
            }  
        });  
 
        //禁用按钮的提交  
        returnfalse;   
    });  
});

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);  
            }  
        });  
 
        //禁用按钮的提交  
        returnfalse;   
    });  
});