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

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

前台代码如下:

 <body>
<div>
<p id="pLoad">Ajax之前的结果</p>
</div>
</body>
</html>
<script>
$(function () {
$.ajax({
type: "POST",
url: "/PageLoad/Test?City=北京&Name=SharpL&Age=18",
cache: false,
data: null,
success: function (result) {
if (result) {
$("#pLoad").text("ajax之后的结果为 " + result.Message + "\n");
}
}
})
});
</script>

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

         public ActionResult Test()
{
var actionResult = default(JsonResult);
var stu = new STU();
this.UpdateModel(stu);
var tmp = string.Format("{0}{1}岁,来自{2}", stu.Name, stu.Age, stu.City);
actionResult = new JsonResult()
{
Data = new { Message = tmp }
};
Thread.Sleep();
return actionResult;
}

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

刚刚加载完Document之后:

5秒钟之后:

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

等价的AJax代码1:

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

等价的Ajax代码2:

         $.post("/TestAjax/Test?City=北京&Name=SharpL&Age=45", "", function (result) {
if (result) {
$("#pDisplay").text("返回信息为 " + result.Message + "\n" + "随机数为" + result.RandomNum);
}
});

ASP.NET MVC如何在页面加载完成后ajax异步刷新的更多相关文章

  1. layui 页面加载完成后ajax重新为 html 赋值 遇到的坑

    页面加载完毕后,通过 ajax 按照返回值,为部分 html 赋值: $(function(){ ..... }) 直接这样写,报错,$ 没有定义什么的,错位原因为 jquery 引入错误. layu ...

  2. 【ASP.NET MVC】提高页面加载速度:脚本优化

    在这里我们说一下脚本优化的三个方法: 一.在我们做Web开发的时候,当我们引用Js文件的时候,我们一般会将js文件放在文档的head标签中,这时当页面加载的时候,浏览器会按着由上到下的顺序,当浏览器遇 ...

  3. 页面加载完成后,触发事件——trigger()

    <button id="btn">点击我</button> <div id="test"></div> 如果页面 ...

  4. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

  5. js页面加载完后执行(document.onreadystatechange 和 document.readyState)

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  6. js中页面加载完成后执行的几种方式及执行顺序

    1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是docu ...

  7. jquery在页面加载完成后再append的元素事件无效问题

    最近遇到一个问题,jquery在页面加载完成后再append的元素,append元素上有onclick事件,但是在append的元素上怎么点击都不会触发onclick事件.就如: <ul cla ...

  8. 页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

  9. php页面加载完毕后再显示购买按钮

    php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})

随机推荐

  1. Centos 6.x 搭建 Zabbix Server

      zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让 ...

  2. Appium问题记录

    1.Appium 提示覆盖安装Appium Android Input Manager for Unicode 问题 安卓手机在新版本中Appium 总是提示覆盖安装Appium Android In ...

  3. Solutions to an Equation LightOJ - 1306

    Solutions to an Equation LightOJ - 1306 一个基础的扩展欧几里得算法的应用. 解方程ax+by=c时,基本就是先记录下a和b的符号fla和flb(a为正则fla为 ...

  4. 中国剩余定理 POJ 1006 Biorhythms

    题目传送门 题意:POJ有中文题面 分析:其实就是求一次同余方程组:(n+d)=p(%23), (n+d)=e(%28), (n+d)=i(%33),套用中国剩余定理模板 代码: /********* ...

  5. PHP常见的输出语句 echo()、print()、print_r()、var_dump()、pinrtf()之间的区别

    echo().print().print_r().var_dump().pinrtf()之间的区别 1.print() :简单输出语句,可以输出字符串,变量.表达式等单项的值!(不能输出数组.对象等复 ...

  6. PopupWindow(1)简介

    PopupWindow有点类似于Dialog,相同点在于都是弹出窗口,并且都可以对其进行自定义显示,并且里面的监听组件,进行相应的操作,但它与Dialog又有很大的区别,PopupWindow只是弹出 ...

  7. 18.5.1使用Proxy和InvocationHandler创建动态代理

    package d18_5_1; public interface Person { void walk(); void sayHello(String name); } package d18_5_ ...

  8. K-th Number 线段树的区间第K大

    http://poj.org/problem?id=2104 由于这题的时间限制不紧,所以用线段树水一水. 每个节点保存的是一个数组. 就是对应区间排好序的数组. 建树的时间复杂度需要nlogn 然后 ...

  9. php服务端接收post的json数据

    最近用到ext与PHP交互,ext把json数据post给PHP,但在PHP里面$_post获取不到,$_REQUEST也获取不到,但是通过firedebug看到的请求信息确实是把JSON数据post ...

  10. 雪碧图(background-position)、overflow、title中的小图标、光标、rgb 和opacity 与rgba

    一.background-position     雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src   url    href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...