ASP.NET MVC如何在页面加载完成后ajax异步刷新
背景：之前已写过两篇有关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异步刷新的更多相关文章
- layui 页面加载完成后ajax重新为 html 赋值 遇到的坑
页面加载完毕后,通过 ajax 按照返回值,为部分 html 赋值: $(function(){ ..... }) 直接这样写,报错,$ 没有定义什么的,错位原因为 jquery 引入错误. layu ...
- 【ASP.NET MVC】提高页面加载速度：脚本优化
在这里我们说一下脚本优化的三个方法: 一.在我们做Web开发的时候,当我们引用Js文件的时候,我们一般会将js文件放在文档的head标签中,这时当页面加载的时候,浏览器会按着由上到下的顺序,当浏览器遇 ...
- 页面加载完成后，触发事件——trigger（）
<button id="btn">点击我</button> <div id="test"></div> 如果页面 ...
- Javascript中页面加载完成后优先执行顺序
Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...
- js页面加载完后执行（document.onreadystatechange 和 document.readyState）
js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...
- js中页面加载完成后执行的几种方式及执行顺序
1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是docu ...
- jquery在页面加载完成后再append的元素事件无效问题
最近遇到一个问题,jquery在页面加载完成后再append的元素,append元素上有onclick事件,但是在append的元素上怎么点击都不会触发onclick事件.就如: <ul cla ...
- 页面加载完毕后调用js方法进行布局操控 已实验
页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...
- php页面加载完毕后再显示购买按钮
php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})
随机推荐
- iOS 将WKWebView内的HTML打印为PDF
使用的webview为WKWebView,核心部分代码(Swift 4): // 创建打印渲染 let printPageRenderer:PDFRender = PDFRender() // 获取渲 ...
- python之yaml模块和ddt模块
aml文件是专门用来写配置文件的语言,非常简洁和强大,远比json格式方便. 在PC中新建一个yml/yaml为为缩略名的文件,输入信息见下图 新建一个py文件处理yml文件,直接处理成字典格式 缩进 ...
- Mirror Number SPOJ - MYQ10
Mirror Number SPOJ - MYQ10 题意:http://blog.csdn.net/hcbbt/article/details/38349367 稍微改一下http://www.cn ...
- C. Arpa's loud Owf and Mehrdad's evil plan DFS + LCM
http://codeforces.com/contest/742/problem/C 首先把图建起来. 对于每个a[i],那么就在i --- a[i]建一条边,单向的. 如果有一个点的入度是0或者是 ...
- 让搜狗输入法更符合编程/vim使用的配置
1. “菜单”—“设置属性”—“常用”—“初始状态”里的“中/英文”选项,选中“英文” 2. 设置属性里的“高级”里的“高级模式”,点“英文输入法设置”,“启动时启用英文输入法”选中 3. 按键-中英 ...
- SpringBoot 2.x （8）：模板引擎
SpringBoot中有很多的starter:本质是多个JAR包集合 比如我们常用的: <dependency> <groupId>org.springframework.bo ...
- [转]java注解与APT技术
下面是一个简单的自定义注解的栗子: package annotation; import java.lang.annotation.Documented; import java.lang.annot ...
- return false 的其中一种用法
return false 的具体是做什么的在这里就不多说了,因为我觉得我形容不明白.....避免大家弄混乱,就不给大家添麻烦了~~ 直接上例子: 1.先看看下面一段代码,指出其中的错误所在: //点击 ...
- 边框圆角值的问题、white-space、word-wrap、margin对布局的影响
1.边框圆角(border-radius)值的问题 border-radius : 7px 7px 7px 0; 四个值的顺序是左上.右上.右下.左下 2.white-space 规定段落中的文本不换 ...
- 在CentOS上把Git从1.7.1升级到1.7.12.4
在CentOS上把Git从1.7.1升级到1.7.12.4 摘要:本文记录了在CentOS 6.3上,把Git从1.7.1升级到1.7.12.4的过程. 1. 概述 在我做的一个项目中,最近我对生产服 ...