这一节给大家讲下MVC2.0中怎样使用AJAX来异步获取信息,本节我们使用JQUERY中的AJAX函数异步获取服务器端的时间。
本节的主要内容
1.asp.net mvc 2.0中使用jquery的ajax函数
2.服务器端时间和客户端时间通过JSON进行相互转换
1. ajax函数的用法
首先,我们看下效果图,点击页面上的 服务器时间按钮,会从服务器端获取时间,并显示在页面上,此时客户端时间是不变的
看下 view层的页面代码
在VIEW页面中,我们发送请求到controller层,然后获取controller层返回的JSON对象
<head runat="server">
<title>用户列表页</title>
<script src="../../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* 时间对象的格式化;
*/
Date.prototype.format = function (format) {
/*
* eg:format="YYYY-MM-dd hh:mm:ss";
*/
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}
window.onload = function () {
var testDate = new Date();
var testStr = testDate.format("yyyy-MM-dd hh:mm:ss");
document.getElementById("clientDiv").innerHTML ="客户端时间:"+ testStr;
}
//异步获取服务器时间
function GetTime()
{
$.ajax({
type: "post",
url: "/user/GetTime",
cache: false,
data: { id: "1" },
success: function (output) {
if (output == "" || output == undefined) {
alert('返回值为空!');
}
else {
// value = new Date(parseInt(output.CurTime.replace("/Date(", "").replace(")/", ""), 10));
value = new Date(parseInt(output.CurTime.substr(6)));
value = value.format("yyyy-MM-dd hh:mm:ss");
$('#divserver').html("服务器时间:" + value);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
alert("获取数据异常");
}
});
}
</script>
</head>
<body>
<p>
<input type="button" value="服务器端时间" οnclick="GetTime();"/>
<div id="divserver">
</div>
<div id="clientDiv">
</div>
</p>
</body>
controller层:
在controller层我们返回一个JSON对象,使用Request.IsAjaxRequest判断是否是一个AJAX请求,如果不为AJAX请求,返回NULL,
如果是AJAX请求,返回一个JSON对象。
public JsonResult GetTime()
{
if (Request.IsAjaxRequest())
{
//如果为AJAX请求
var info = new Models.Info();
info.ID = "13";
return this.Json(info);
}
else
{
return null;
}
}
model层:
info的CurTime属性里面记录了当前服务器的时间。
public class Info
{
public string ID
{
get;
set;
}
public DateTime CurTime
{
get { return DateTime.Now; }
}
}
通过以上代码就能获取到服务器的时间了。
2.服务器端时间和客户端时间的转换
实际上服务器端的时间和客户端时间的转换是一个比较棘手的地方。
如果服务器端的curtime是一个string类型,这样是没问题的。
但是服务器的时间是datetime类型,通过AJAX调用,返回给客户端是这样格式的,/Date(1242357713797+0800)/,这样客户端就没法识别,需要转换,
通过以下几种方法可进行转换:
1. value = new Date(parseInt(output.CurTime.replace("/Date(", "").replace(")/", ""), 10));
2. value = new Date(parseInt(output.CurTime.substr(6)));
更多转换的方法可参照以下链接,本人认为以下链接不错,特贴出来供大家参考
http://www.cnblogs.com/shanyou/archive/2009/07/24/1530088.html
http://stackoverflow.com/questions/726334/asp-net-mvc-jsonresult-date-format
http://www.cnblogs.com/coolcode/archive/2009/05/22/1487254.html