《ASP.NET MVC 企业级实战》异步Ajax

最新推荐文章于 2020-12-27 01:40:55 发布

原创最新推荐文章于 2020-12-27 01:40:55 发布 · 461 阅读

0 ·

CC 4.0 BY-SA版权

ASP.NET MVC 专栏收录该内容

6 篇文章

订阅专栏

本文介绍两种使用Ajax获取服务器当前时间的方法：一是通过JQ结合一般处理程序实现；二是利用JQ与MVC控制器中的Action交互完成。两种方法均演示了如何在用户点击按钮后更新页面显示的时间。

一、传统的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>