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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
[WebMethod] 命名空间
1、无参数的方法调用, 注意：1.方法一定要静态方法，而且要有[WebMethod]的声明
后台:

后台代码

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

前台:

前台代码

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

后台

 1 using System.Web.Script.Services; 
 2   
 3 [WebMethod] 
 4 public static string GetStr(string str, string str2) 
 5 { 
 6     return str + str2; 
 7 } 
 8 
 9 
10 本篇文章来源于 dotnet开源社区  原文链接：http://www.openaspx.com/article/201204/06/20120406090800.htm

前台

 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、返回数组方法的调用

后台

 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 }

前台

 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 });

4、返回Hashtable方法的调用

后台

 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 }

前台

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

5、操作xml

xml

 1 XMLtest.xml: 
 2   
 3 view plaincopy to clipboardprint? 
 4 <?xml version="1.0" encoding="utf-8" ?>  
 5 <data>  
 6 <item>  
 7     <id>1</id>  
 8     <name>qwe</name>  
 9 </item>  
10 <item>  
11     <id>2</id>  
12     <name>asd</name>  
13 </item>  
14 </data>  
15 <?xml version="1.0" encoding="utf-8" ?> 
16 <data> 
17 <item> 
18     <id>1</id> 
19     <name>qwe</name> 
20 </item> 
21 <item> 
22     <id>2</id> 
23     <name>asd</name> 
24 </item> 
25 </data>

前台

 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 });