zoukankan      html  css  js  c++  java
  • ASP.NET MVC如何在页面加载完成后ajax异步刷新

    背景:之前已写过两篇有关Ajax的随笔,这一篇是单独针对在页面加载完成的Ajax操作。比如说打开学生列表页面,先加载页面,然后以Ajax的方式,从数据库中检索相应的学生信息,给浏览者更好的体验。

    简单版本:document加载完成之后,调用ajax刷新当前页面,修改pLoad的显示文本。

    前台代码如下:

     1 <body>
     2     <div>
     3         <p id="pLoad">Ajax之前的结果</p>
     4     </div>
     5 </body>
     6 </html>
     7 <script>
     8     $(function () {
     9         $.ajax({
    10             type: "POST",
    11             url: "/PageLoad/Test?City=北京&Name=SharpL&Age=18",
    12             cache: false,
    13             data: null,
    14             success: function (result) {
    15                 if (result) {
    16                     $("#pLoad").text("ajax之后的结果为 " + result.Message + "
    ");
    17                 }
    18             }
    19         })
    20     });
    21 </script>
    View Code

    如代码所示,在加载完成之后,ajax调用PageLoad控制器下的Test动作方法,后台代码如下:

     1         public ActionResult Test()
     2         {
     3             var actionResult = default(JsonResult);
     4             var stu = new STU();
     5             this.UpdateModel(stu);
     6             var tmp = string.Format("{0}{1}岁,来自{2}", stu.Name, stu.Age, stu.City);
     7             actionResult = new JsonResult()
     8             {
     9                 Data = new { Message = tmp }
    10             };
    11             Thread.Sleep(5000);
    12             return actionResult;
    13         }

    根据前台传递过来的学生信息,返回一个字符串给ajax,注意Thread.Sleep(5000),使当前的进程休息5秒,使ajax的效果更加明显,效果图如下:

    刚刚加载完Document之后:

    5秒钟之后:

    补充:以$.post()的方式发起Ajax请求,参考链接:AJAX请求 $.post方法的使用

    等价的AJax代码1:

    1         $.post("/TestAjax/Test", { City: '北京', Name: 'Sharp', Age: 23 }, function (result) {
    2             if (result) {
    3                 $("#pDisplay").text("返回信息为 " + result.Message + "
    " + "随机数为" + result.RandomNum);
    4             }
    5         });

    等价的Ajax代码2:

    1         $.post("/TestAjax/Test?City=北京&Name=SharpL&Age=45", "", function (result) {
    2             if (result) {
    3                 $("#pDisplay").text("返回信息为 " + result.Message + "
    " + "随机数为" + result.RandomNum);
    4             }
    5         });
  • 相关阅读:
    启用数据库 aspnetstate 会话状态
    窗体设计器
    玩转hyper-v
    PDF,IMAGE,HTML,WORD,EXCEL 互操作
    在线浏览office 文件
    使用c#操作txt
    C#里调用 MysqlDB
    c#控件攻略宝典之ListBox控件
    c# word文档与二进制数据的相互转换
    C#对话框的使用
  • 原文地址:https://www.cnblogs.com/SharpL/p/4687261.html
Copyright © 2011-2022 走看看