博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jquery异步调用页面后台方法‏

Posted on 2011-03-01 15:38  hyd309  阅读(531)  评论(1编辑  收藏  举报

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