jquery异步调用页面后台方法‏(asp.net)

nnj 2011-03-01

代码如下:

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

相关推荐