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]特性修饰