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

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

「已注销」

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

阅读量95

点赞数

本文链接：https://blog.csdn.net/zhonghua_csdn/article/details/89877640

版权

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

获取当前时间

微信公众号：

公众号.png

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《ASP.NET MVC 企业级实战》异步Ajax

一、传统的Ajax实现方式1.JQ+一般处理程序:点击按钮获取当前时间第一步：创建一个html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="...
复制链接

扫一扫