|
|
|
|
移动端

jQuery异步调用页面后台实例分析

本文列举了两个简单的例子,来介绍jQuery异步调用页面后台方法‏,方便大家学习和参考

作者:李玉欣来源:李玉欣的博客|2011-03-02 08:57

开发者盛宴来袭!7月28日51CTO首届开发者大赛决赛带来技术创新分享

jQuery调用页面后台方法‏如下:

给出了两个简单的例子,无参数的和有参数的,返回的都是json数据。

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryCSMethodForm.aspx.cs" Inherits="JQuerWeb.JqueryCSMethodForm" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script type="text/javascript" src="JS/jquery-1.4.2.js"></script>  
  7.      
  8.     <script type="text/javascript">  
  9.         $(document).ready(function() {  
  10.             $("input[type='button'][value='GetDate']").click(function() {  
  11.                 $.ajax({  
  12.                     type: "post",  
  13.                     url: "JqueryCSMethodForm.aspx/GetNowDate",  
  14.                     datatype: "json",  
  15.                     contentType: "application/json; charset=utf-8",  
  16.                     success: function(data) {  
  17.                         $("input#showTime").val(eval('(' + data.d + ')')[0].nowtime);  
  18.                     },  
  19.                     error: function(XMLHttpRequest, textStatus, errorThrown) {  
  20.                         alert(errorThrown);  
  21.                     }  
  22.                 });  
  23.             });  
  24.             $("input[type='button'][value='GetOneDayLater']").click(function() {  
  25.                 $.ajax({  
  26.                     type: "post",  
  27.                     url: "JqueryCSMethodForm.aspx/GetOneDayLate",  
  28.                     data:"{days:1}",  
  29.                     datatype: "json",  
  30.                     contentType: "application/json; charset=utf-8",  
  31.                     success: function(data) {  
  32.                         $("input#showTime").val(eval('(' + data.d + ')')[0].nowtime);  
  33.                     },  
  34.                     error: function(XMLHttpRequest, textStatus, errorThrown) {  
  35.                     alert(errorThrown);  
  36.                     }  
  37.                 });  
  38.             });  
  39.         });  
  40.         
  41.     </script>  
  42. </head>  
  43. <body>  
  44.     <form id="form1" runat="server">  
  45.     <div>  
  46.         <input type="button" value="GetDate" />  
  47.         <input type=button value="GetOneDayLater" />  
  48.         <input type="text" id="showTime" />  
  49.     </div>  
  50.     </form>  
  51. </body>  
  52. </html> 

CS代码:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Web.Services;  
  8. namespace JQuerWeb  
  9. {  
  10.     public partial class JqueryCSMethodForm : System.Web.UI.Page  
  11.     {  
  12.          
  13.         protected void Page_Load(object sender, EventArgs e)  
  14.         {  
  15.             
  16.         }  
  17.         [WebMethod]  
  18.         public static String GetNowDate()  
  19.         {  
  20.             return "[{\"nowtime\":\"" + DateTime.Now.ToShortDateString() + "\"}]";  
  21.         }  
  22.         [WebMethod]  
  23.         public static String GetOneDayLate(Int32 days)  
  24.         {  
  25.             return "[{\"nowtime\":\"" + DateTime.Now.AddDays(days).ToShortDateString() + "\"}]";  
  26.         }  
  27.     }  

注意点:

(1) url的填写格式 url+"/method name"

(2) contentType: "application/json; charset=utf-8", 这个必须要有

(3) 返回数据的类型为json

(4) data:"{days:1}",参数的传递

(5) 后台的方法必须是public static 而且还要有 [WebMethod]特性修饰

原文链接:http://www.cnblogs.com/liyuxin/archive/2011/03/01/1967776.html

【编辑推荐】

  1. 2011年2月份13个jQuery最佳插件推荐
  2. 记一次失败的jQuery优化尝试
  3. jQuery 1.5正式版发布 五大变化引人注目
  4. jQuery实现表格数据的动态添加与统计
  5. 使用 jQuery 简化 Ajax 开发
【责任编辑:陈贻新 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

J2EE开发全程实录

J2EE是目前企业级软件开发的首选平台。本书从架构的角度讲解了一个完整的J2EE系统的搭建。内容包括:正则表达式、JSP、Swing、XML等技术在...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊