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

jquery调用页面后台方法‏如下：

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryCSMethodForm.aspx.cs" Inherits="JQuerWeb.JqueryCSMethodForm" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" >  
<head runat="server">  
    <title></title>  
    <script type="text/javascript" src="JS/jquery-1.4.2.js"></script>  
     
    <script type="text/javascript">  
        $(document).ready(function() {  
            $("input[type='button'][value='GetDate']").click(function() {  
                $.ajax({  
                    type: "post",  
                    url: "JqueryCSMethodForm.aspx/GetNowDate",  
                    datatype: "json",  
                    contentType: "application/json; charset=utf-8",  
                    success: function(data) {  
                        $("input#showTime").val(eval('(' + data.d + ')')[0].nowtime);  
                    },  
                    error: function(XMLHttpRequest, textStatus, errorThrown) {  
                        alert(errorThrown);  
                    }  
                });  
            });  
            $("input[type='button'][value='GetOneDayLater']").click(function() {  
                $.ajax({  
                    type: "post",  
                    url: "JqueryCSMethodForm.aspx/GetOneDayLate",  
                    data:"{days:1}",  
                    datatype: "json",  
                    contentType: "application/json; charset=utf-8",  
                    success: function(data) {  
                        $("input#showTime").val(eval('(' + data.d + ')')[0].nowtime);  
                    },  
                    error: function(XMLHttpRequest, textStatus, errorThrown) {  
                    alert(errorThrown);  
                    }  
                });  
            });  
        });  
        
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
        <input type="button" value="GetDate" />  
        <input type=button value="GetOneDayLater" />  
        <input type="text" id="showTime" />  
    </div>  
    </form>  
</body>  
</html>

CS代码：

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Web.Services;  
namespace JQuerWeb  
{  
    public partial class JqueryCSMethodForm : System.Web.UI.Page  
    {  
         
        protected void Page_Load(object sender, EventArgs e)  
        {  
            
        }  
        [WebMethod]  
        public static String GetNowDate()  
        {  
            return "[{/"nowtime/":/"" + DateTime.Now.ToShortDateString() + "/"}]";  
        }  
        [WebMethod]  
        public static String GetOneDayLate(Int32 days)  
        {  
            return "[{/"nowtime/":/"" + DateTime.Now.AddDays(days).ToShortDateString() + "/"}]";  
        }  
    }  
}

注意点：

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

http://www.gaodaima.com/29088.html

(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

【编辑推荐】

2011年2月份13个jQuery最佳插件推荐
记一次失败的jQuery优化尝试
jQuery 1.5正式版发布五大变化引人注目
jQuery实现表格数据的动态添加与统计
使用 jQuery 简化 Ajax 开发

【责任编辑：陈贻新 TEL：（010）68476606】

欢迎大家阅读《jQuery异步调用页面后台实例分析_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery异步调用页面后台实例分析_js

http://www.gaodaima.com/29088.html

Hi，您需要填写昵称和邮箱！