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

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

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

1、无参数的方法调用

asp.net code：

[c-sharp] view plain copy print ?

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

using System.Web.Script.Services; [WebMethod] public static string SayHello() { return "Hello Ajax!"; }

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

JQuery code：

[javascript] view plain copy print ?

1. /// <reference path="jquery-1.4.2-vsdoc.js"/> 
2. $(function() { 
3.     $("#btnOK").click(function() { 
4.         $.ajax({ 
5.             //要用post方式 
6.             type: "Post", 
7.             //方法所在页面和方法名 
8.             url: "data.aspx/SayHello", 
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. }); 

/// <reference path="jquery-1.4.2-vsdoc.js"/> $(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、带参数的方法调用

asp.net code：

[c-sharp] view plain copy print ?

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

using System.Web.Script.Services; [WebMethod] public static string GetStr(string str, string str2) { return str + str2; }

JQuery code：

[javascript] view plain copy print ?

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

/// <reference path="jquery-1.4.2-vsdoc.js"/> $(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、返回数组方法的调用

asp.net code：

[c-sharp] view plain copy print ?

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. } 

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 + ""); return li; }

JQuery code：

[javascript] view plain copy print ?

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

/// <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方法的调用

asp.net code：

[c-sharp] view plain copy print ?

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. } 

using System.Web.Script.Services; using System.Collections; [WebMethod] public static Hashtable GetHash(string key,string value) { Hashtable hs = new Hashtable(); hs.Add("www", "yahooooooo"); hs.Add(key, value); return hs; }

JQuery code：

[javascript] view plain copy print ?

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

/// <reference path="jquery-1.4.2-vsdoc.js"/> $(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

XMLtest.xml:

[xhtml] view plain copy print ?

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> 

<?xml version="1.0" encoding="utf-8" ?> <data> <item> <id>1</id> <name>qwe</name> </item> <item> <id>2</id> <name>asd</name> </item> </data>

JQuery code:

[javascript] view plain copy print ?

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

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

运行结果：