JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > jQuery AJAX实现调用页面后台方法

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

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


  1. using System.Web.Services;
复制代码

3.无参数的方法调用.
大家注意了,这个版本不能低于.net framework 2.0。2.0已下不支持的。
后台代码:


  1. [WebMethod]     
  2. public static string SayHello()     
  3. {     
  4.      return "Hello Ajax!";     
  5. }   
复制代码

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':'**'}",     
  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>
复制代码
运行结果图:


      主要研究技术:C#、WinForm、ASP.NET、MVC、EF、NHibernate、SQL Server、Oracle、 JavaScript、HTML5、CSS3、JQuery、Silverlight、WPF、WCF等技术。

【jQuery AJAX实现调用页面后台方法】相关文章

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

2. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

3. JavaScript的4种调用函数的方法

4. Firefox实现HTML5音视频播放GStreamer后端支持

5. 短小强悍的JavaScript异步调用库

6. jQuery快速实现自动隐藏/展示的页面顶端固定菜单效果

7. jQuery实现页面元素在浏览器中任何时候保持全屏展示效果

8. HTML 5特效页面及js测试页面汇总推荐

9. 页面前端的水有多深?再议页面开发

10. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

本文来源:https://www.51html5.com/a1336.html

点击展开全部

﹝jQuery AJAX实现调用页面后台方法﹞相关内容

「jQuery AJAX实现调用页面后台方法」相关专题

其它栏目

也许您还喜欢