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

迷南。 2022-10-02 04:46 9阅读 0赞

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

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

**1、无参数的方法调用**

asp.net code：

**\[c-sharp\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

结果：

![0_1273027298nDIo.gif][]

**2、带参数的方法调用**

asp.net code：

**\[c-sharp\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

运行结果：

![0_1273028217utkO.gif][]

**下面进入高级应用罗**

**3、返回数组方法的调用**

asp.net code：

**\[c-sharp\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

运行结果：

![0_1273030133FNRr.gif][]

**4、返回Hashtable方法的调用**

asp.net code：

**\[c-sharp\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

运行结果：

![0_1273032620hvVu.gif][]

**5、操作xml**

XMLtest.xml:

**\[xhtml\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

运行结果：

![0_1274157045EhCO.gif][]

[view plain]: http://blog.csdn.net/richcem/article/details/5558369#
[0_1273027298nDIo.gif]: /images/20220113/18353dff6da247a395c62d422db4a451.png
[0_1273028217utkO.gif]: /images/20220113/bd74f551ca674641bc577e4970e23864.png
[0_1273030133FNRr.gif]: /images/20220113/dd5b274bd1c341f7acf24ad261d629f7.png
[0_1273032620hvVu.gif]: /images/20220113/9141e1c832704808963252c5b3bde05b.png
[0_1274157045EhCO.gif]: /images/20220113/bfb28c2cd57b4ba7a4a35ce0137e5ed1.png