ajax 获取page,【Jquery】AJAX & Page method

摘要: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/

欢迎各位前辈指教与讨论