夏日博客

A-A+

jQuery AJAX实现调用页面后台方法

2017年01月21日 前端设计 暂无评论 阅读 2 views 次

1.新建demo.aspx页面。

2.首先在该页面的后台文件demos.aspx.cs中添加引用。

using System.Web.Services;

3.无参数的方法调用.

大家注意了，这个版本不能低于.net framework 2.0。2.0已下不支持的。

后台代码：

  1. public static string SayHello()       
  2. {       
  3.      return "Hello Ajax!";       
  4. }  

JS代码：

  1. $(function() {       
  2.     $("#btnOK").click(function() {       
  3.         $.ajax({       
  4.             //要用post方式        
  5.             type: "Post",       
  6.             //方法所在页面和方法名        
  7.             url: "Demo.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. });     

页面代码：

  1. <form id="form1" runat="server">  
  2. <div>  
  3.     <asp:Button ID="btnOK" runat="server" Text="验证用户" />  
  4. </div>  
  5. </form>  

运行效果如下：

3.有参数方法调用

后台代码：

  1. [WebMethod]       
  2. public static string GetStr(string str, string str2)       
  3. {       
  4.     return str + str2;       
  5. }   

JS代码：

  1. $(function() {       
  2.     $("#btnOK").click(function() {       
  3.         $.ajax({       
  4.             type: "Post",       
  5.             url: "demo.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. });   

运行效果如下：

4.返回数组方法

后台代码：

  1. [WebMethod]       
  2. public static List<string> GetArray()       
  3. {       
  4.     List<string> li = new List<string>();       
  5.       
  6.     for (int i = 0; i < 10; i++)       
  7.         li.Add(i + "");       
  8.       
  9.     return li;       
  10. }   

JS代码：

  1. $(function() {       
  2.     $("#btnOK").click(function() {       
  3.         $.ajax({       
  4.             type: "Post",       
  5.             url: "demo.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. });   

页面代码：

  1. <form id="form1" runat="server">  
  2. <div>  
  3.     <asp:Button ID="btnOK" runat="server" Text="验证用户" />  
  4. </div>  
  5. <ul id="list">  
  6. </ul>  
  7. </form>  

运行结果图：

标签：

给我留言