jQuery異步調用頁面后臺實例分析

作者：李玉欣 2011-03-02 08:57:22

本文列舉了兩個簡單的例子，來介紹jQuery異步調用頁面后臺方法‏,方便大家學習和參考

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"

(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 開發

責任編輯：陳貽新來源：李玉欣的博客

jQuery JavaScript