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

刺骨的言语ヽ痛彻心扉 2021-06-24 16:11 371阅读 0赞

#### 一、传统的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请求，获取一般处理程序获取的当钱时间。

![2789632-50ab508f8f75a8f6.gif][]

测试结果

注解：JQ的api参考网址： [http://jquery.cuishifeng.cn/index.html][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>

![2789632-4631da47525772ba.png][]

获取当前时间

微信公众号：

![2789632-3b18269684ea9294.png][]

公众号.png

[2789632-50ab508f8f75a8f6.gif]: /images/20210615/f10db947d1fe4cc58ad0457846f6f784.png
[http_jquery.cuishifeng.cn_index.html]: http://jquery.cuishifeng.cn/index.html
[2789632-4631da47525772ba.png]: /images/20210615/8ce90853b18347e7b84a5bac1f37d7a5.png
[2789632-3b18269684ea9294.png]: /images/20210615/505147f2e898489db36bc0a25d4d84ad.png