jQuery异步调用页面后台实例分析_H5之家 - 中国HTML5教程资源分享第一站

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() + "\"}]";  
        }  
    }  
}