• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NETMVC如何在页面加载完成后ajax异步刷新

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

背景:之前已写过两篇有关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 + "\n");
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 + "\n" + "随机数为" + 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 + "\n" + "随机数为" + result.RandomNum);
4             }
5         });

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap