jQuery异步调用页面后台实例分析
创始人
2024-07-21 22:00:11
0

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

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryCSMethodForm.aspx.cs" Inherits="JQuerWeb.JqueryCSMethodForm" %>  
  2.  
  3.  
  4.  
  5.       
  6.       
  7.      
  8.       
  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.       
  42.  
  43.  
  44.       
  45.     
     
  46.           
  47.           
  48.           
  49.     
 
  •       
  •  
  •  
  • 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 开发

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
    《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
    2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...