首页 > 代码库 > JQuery直接调用asp.net后台WebMethod方法

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

2024-07-19 17:55:09   226人阅读

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

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


联系
我们