《ASP.NET MVC 企业级实战》异步Ajax
2017-11-13 本文已影响115人
张中华
一、传统的Ajax实现方式
1.JQ+一般处理程序:点击按钮获取当前时间
第一步：创建一个html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQ+一般处理程序</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
</head>
<body>
<input type="button" value="获取时间" id="btnGetDateTime" />
<div id="divDateTime"></div>
</body>
</html>
第二步：写一个一般处理程序，获取当前时间
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write(DateTime.Now.ToString());
}
第三步：在第一步的html里面添加ajax请求，获取一般处理程序获取的当钱时间。
<script type="text/javascript">
$(function () {
$("#btnGetDateTime").click(function () {
$.post("GetDateTimeHandler.ashx", {}, function (data) {
$("#divDateTime").html(data);
})
});
});
</script>
测试结果
注解：JQ的api参考网址：http://jquery.cuishifeng.cn/index.html
2.JQ+Action:点击按钮获取当前时间
在mvc中的控制器中添加获取当前时间的方法：
public ActionResult GetTime()
{
var time = DateTime.Now.ToString();
return Content(time);
}
添加视图：
@{
ViewBag.Title = "Index";
}
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<input type="button" value="获取时间" id="btnGetDateTime" />
<div id="divDateTime"></div>
<script type="text/javascript">
$(function () {
$("#btnGetDateTime").click(function () {
$.post("/Employee/GetTime", {}, function (data) {
$("#divDateTime").html(data);
})
});
});
</script>
获取当前时间
