首页 > Web开发 > 详细

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

时间：2014-08-27 10:37:07      阅读：333      评论：0      收藏：0      [点我收藏+]

利用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方法

原文：http://www.cnblogs.com/lschenblog/p/3938756.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！