利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

先来个简单的实例热热身吧。

1、无参数的方法调用

asp.net code：

1. using System.Web.Script.Services;    
2.    
3. [WebMethod]    
4. public static string SayHello()    
5. {    
6.      return "Hello Ajax!";    
7. }   

注意：1.方法一定要静态方法，而且要有[WebMethod]的声明

JQuery code：

1. $(function() {    
2.     $("#btnOK").click(function() {    
3.         $.ajax({    
4.             //要用post方式    
5.             type: "Post",    
6.             //方法所在页面和方法名    
7.             url: "data.aspx/SayHello",    
8.             contentType: "application/json; charset=utf-8",    
9.             dataType: "json",    
10.             success: function(data) {    
11.                 //返回的数据用data.d获取内容    
12.                 alert(data.d);    
13.             },    
14.             error: function(err) {    
15.                 alert(err);    
16.             }    
17.         });    
18.    
19.         //禁用按钮的提交    
20.         return false;    
21.     });    
22. });  

结果：

2、带参数的方法调用

asp.net code：

1. using System.Web.Script.Services;    
2.    
3. [WebMethod]    
4. public static string GetStr(string str, string str2)    
5. {    
6.     return str + str2;    
7. }   

JQuery code：

1. /// <reference path="jquery-1.4.2-vsdoc.js"/>    
2. $(function() {    
3.     $("#btnOK").click(function() {    
4.         $.ajax({    
5.             type: "Post",    
6.             url: "data.aspx/GetStr",    
7.             //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字    
8.             data: "{'str':'我是','str2':'XXX'}",    
9.             contentType: "application/json; charset=utf-8",    
10.             dataType: "json",    
11.             success: function(data) {    
12.                 //返回的数据用data.d获取内容    
13.                   alert(data.d);    
14.             },    
15.             error: function(err) {    
16.                 alert(err);    
17.             }    
18.         });    
19.    
20.         //禁用按钮的提交    
21.         return false;    
22.     });    
23. });   

运行结果：

下面进入高级应用罗

3、返回数组方法的调用

asp.net code：

1. using System.Web.Script.Services;    
2.    
3. [WebMethod]    
4. public static List<string> GetArray()    
5. {    
6.     List<string> li = new List<string>();    
7.    
8.     for (int i = 0; i < 10; i++)    
9.         li.Add(i + "");    
10.    
11.     return li;    
12. }   

JQuery code：

1. /// <reference path="jquery-1.4.2-vsdoc.js"/>    
2. $(function() {    
3.     $("#btnOK").click(function() {    
4.         $.ajax({    
5.             type: "Post",    
6.             url: "data.aspx/GetArray",    
7.             contentType: "application/json; charset=utf-8",    
8.             dataType: "json",    
9.             success: function(data) {    
10.                 //插入前先清空ul    
11.                 $("#list").html("");    
12.    
13.                 //递归获取数据    
14.                 $(data.d).each(function() {    
15.                     //插入结果到li里面    
16.                     $("#list").append("<li>" + this + "</li>");    
17.                 });    
18.    
19.                 alert(data.d);    
20.             },    
21.             error: function(err) {    
22.                 alert(err);    
23.             }    
24.         });    
25.    
26.         //禁用按钮的提交    
27.         return false;    
28.     });    
29. });   

运行结果：

4、返回Hashtable方法的调用

asp.net code：

1. using System.Web.Script.Services;    
2. using System.Collections;    
3.    
4. [WebMethod]    
5. public static Hashtable GetHash(string key,string value)    
6. {    
7.     Hashtable hs = new Hashtable();    
8.    
9.     hs.Add("www", "yahooooooo");    
10.     hs.Add(key, value);    
11.         
12.     return hs;    
13. }   

JQuery code：

1. /// <reference path="jquery-1.4.2-vsdoc.js"/>    
2. $(function() {    
3.     $("#btnOK").click(function() {    
4.         $.ajax({    
5.             type: "Post",    
6.             url: "data.aspx/GetHash",    
7.             //记得加双引号  T_T    
8.             data: "{ 'key': 'haha', 'value': '哈哈！' }",    
9.             contentType: "application/json; charset=utf-8",    
10.             dataType: "json",    
11.             success: function(data) {    
12.                 alert("key: haha ==> "+data.d["haha"]+"/n key: www ==> "+data.d["www"]);    
13.             },    
14.             error: function(err) {    
15.                 alert(err + "err");    
16.             }    
17.         });    
18.    
19.         //禁用按钮的提交    
20.         return false;    
21.     });    
22. });   

运行结果：

5、操作xml

XMLtest.xml:

1. <?xml version="1.0" encoding="utf-8" ?>   
2. <data>   
3.   <item>   
4.     <id>1</id>   
5.     <name>qwe</name>   
6.   </item>   
7.   <item>   
8.     <id>2</id>   
9.     <name>asd</name>   
10.   </item>   
11. </data>   

JQuery code:

1. $(function() {    
2.     $("#btnOK").click(function() {    
3.         $.ajax({    
4.             url: "XMLtest.xml",    
5.             dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了    
6.             success: function(xml) {    
7.                 //清空list    
8.                 $("#list").html("");    
9.                 //查找xml元素    
10.                 $(xml).find("data>item").each(function() {    
11.                     $("#list").append("<li>id:" + $(this).find("id").text() +"</li>");    
12.                     $("#list").append("<li>Name:"+ $(this).find("name").text() + "</li>");    
13.                 })    
14.             },    
15.             error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数    
16.                 alert(status);    
17.             }    
18.         });    
19.    
20.         //禁用按钮的提交    
21.         return false;    
22.     });    
23. });   

 

来自：http://www.cnblogs.com/dotnetfangjun/archive/2012/04/11/2441949.html