【Jquery】AJAX & Page method

2011-05-10

3311
0
2011-05-11

摘要:AJAX&Page method

如何用Jquery與server做溝通?並且擺脫autopostback?首先,你必須在server寫一個WebMethod,在這裡我是用.aspx頁面來做,必須宣告為static,並且加上[WebMethod]的屬性,接著我這邊是回傳一個時間的字串

TestPage.aspx.cs


using System.Web.Script.Services;

        [System.Web.Services.WebMethod]        
        public static string gettime()
        {
            return DateTime.Now.ToString();
        }

在javascript這裡我是利用$.ajax來呼叫這個method,在點擊一個ID為btn1的button以後,他將會去呼叫TestPage.aspx裡的gettime,用中斷點來看我們將會看到回傳的msg裡面是一個Object

msg=Object { d="2011/5/10 上午 11:31:47"}

所以可以用msg.d將時間印在畫面上

javascript


$(function() {
            $("#btn1").click(function() {
                $.ajax({
                    type: "POST",
                    url: "TestPage.aspx/gettime",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                        $("#Result").text(msg.d);
                    }
                });
            });
        });

而接下來這個範例只是稍微修改一小部分,直接傳JSON格式,不過要先載jquery-json的套件


using System.Web.Script.Services;

        [System.Web.Services.WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string gettime(int id)
        {
            return id.ToString();
        }

我這邊是做的比較簡單,直接接收什麼就回傳什麼,底下是Javascript

javascript


$(function() {            
            var id = 2;
            $("#btn1").click(function() {
                $.ajax({
                    type: "POST",
                    url: "TestPage.aspx/gettime",
                    data: $.toJSON({ ids: id }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {                                                
                        $("#Result").text(msg.d);
                    }
                });
            });
        });

會看到$.toJSON({ ids : id })這行程式碼,表示一個JSON物件,一樣取回msg

當然這只是一個簡單的範例,但可以利用AJAX將頁面做得乾淨且可以擺脫惱人的ViewState

參考文章:http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

歡迎各位前輩指教與討論

回首頁