JQuery直接调用asp.net后台WebMethod方法

[csharp] view plaincopy

1.   

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
[WebMethod]   命名空间

1、无参数的方法调用, 注意：1.方法一定要静态方法，而且要有[WebMethod]的声明
后台<C#>:

[csharp] view plaincopy

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

前台<JQuery>:

[javascript] view plaincopy

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、带参数的方法调用

后台<C#>:

[csharp] view plaincopy

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>:

[javascript] view plaincopy

1. $(function() {     
2.     $("#btnOK").click(function() {     
3.         $.ajax({     
4.             type: "Post",     
5.             url: "data.aspx/GetStr",     
6.             //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字     
7.             data: "{'str':'我是','str2':'XXX'}",     
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. });  

3、返回数组方法的调用

后台<C#>:

[csharp] view plaincopy

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>:

[javascript] view plaincopy

1. $(function() {     
2.     $("#btnOK").click(function() {     
3.         $.ajax({     
4.             type: "Post",     
5.             url: "data.aspx/GetArray",     
6.             contentType: "application/json; charset=utf-8",     
7.             dataType: "json",     
8.             success: function(data) {     
9.                 //插入前先清空ul     
10.                 $("#list").html("");     
11.    
12.                 //递归获取数据     
13.                 $(data.d).each(function() {     
14.                     //插入结果到li里面     
15.                     $("#list").append("<li>" + this + "</li>");     
16.                 });     
17.    
18.                 alert(data.d);     
19.             },     
20.             error: function(err) {     
21.                 alert(err);     
22.             }     
23.         });     
24.    
25.         //禁用按钮的提交     
26.         return false;     
27.     });     
28. });   
29. /// <reference path="jquery-1.4.2-vsdoc.js"/>  
30. $(function() {  
31.     $("#btnOK").click(function() {  
32.         $.ajax({  
33.             type: "Post",  
34.             url: "data.aspx/GetArray",  
35.             contentType: "application/json; charset=utf-8",  
36.             dataType: "json",  
37.             success: function(data) {  
38.                 //插入前先清空ul  
39.                 $("#list").html("");  
40.    
41.                 //递归获取数据  
42.                 $(data.d).each(function() {  
43.                     //插入结果到li里面  
44.                     $("#list").append("<li>" + this + "</li>");  
45.                 });  
46.    
47.                 alert(data.d);  
48.             },  
49.             error: function(err) {  
50.                 alert(err);  
51.             }  
52.         });  
53.    
54.         //禁用按钮的提交  
55.         return false;  
56.     });  
57. });