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

转自  http://blog.csdn.net/handsometone1982/article/details/7684894

利用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. });   
posted @ 2015-10-15 15:05  #天行健#  阅读(321)  评论(0编辑  收藏  举报