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

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

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 开发
责任编辑:陈贻新 来源: 李玉欣的博客
相关推荐

2009-07-01 14:31:01

JavaScript异

2010-02-22 13:28:05

WCF异步调用

2009-11-09 15:49:01

WCF异步调用

2009-10-20 16:48:30

C#委托

2009-12-21 14:10:26

WCF异步调用

2009-11-09 10:50:30

WCF异步调用

2009-07-01 13:58:00

JavaScript异

2009-11-06 15:54:15

WCF异步调用

2009-07-01 14:37:14

JavaScript异

2009-07-01 14:23:46

JavaScript异

2009-07-01 14:05:23

JavaScript异

2009-08-21 11:24:16

C#异步调用

2009-12-07 14:35:42

WCF异步调用

2012-10-29 10:59:27

Windows 8

2009-12-07 14:26:47

WCF异步调用

2010-01-11 17:24:19

VB.NET异步调用

2021-03-29 09:26:44

SpringBoot异步调用@Async

2009-08-21 11:02:55

C#异步调用

2020-01-02 16:30:02

Spring BootJava异步请求

2010-02-25 09:13:34

WCF异步调用
点赞
收藏

51CTO技术栈公众号