异步Ajax
Ajax异步刷新应用在Web开发中经常用到，在过去WebForm中通常是使用JQuery和一般处理程序或者aspx页面来实现；
在MVC中，虽然依然可以使用一般处理程序，但是一般还是通过在Controller中新建Action方法来实现。
一、 JQuery+一般处理程序 实现异步Ajax
1.新建一个空MVC项目，命名为AjaxDemo
2. 右键项目，选择“添加->HTML页”，命名为ShowDateTime.html，引入jquery文件（NuGet下载jquery），代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$("#btnGetDateTime").click(function () {
$.post(
"GetDateTimeHandler.ashx",
{},
function (data) {
$("#divDateTime").html(data);
});
});
})
</script>
</head>
<body>
<input type="button" value="获取时间" id="btnGetDateTime" />
<div id="divDateTime"></div>
</body>
</html>
3. 右键项目，选择“添加->新建项->一般处理程序”，并设置名称为GetDateTimeHandler.ashx，修改代码：
public class GetDateTimeHandler : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write(DateTime.Now.ToString());
} public bool IsReusable
{
get
{
return false;
}
}
}
4. 运行ShowDateTime.html（右键该文件，在浏览器中查看），如下图：
二、Jquery+Action 实现异步Ajax
1. 在Models文件夹下新建一个User实体
public class User
{
public int Id { get; set; } public string UserName { get; set; } public int Age { get; set; } public string TelPhone { get; set; }
}
2. 新建HomeController，添加UserList方法
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
} [HttpPost]
public ActionResult UserList()
{
List<User> list = new List<User>()
{
new User() {Id = ,UserName="小明",Age=,TelPhone="" },
new User() {Id = ,UserName="小王",Age=,TelPhone="" },
new User() {Id = ,UserName="小赵",Age=,TelPhone="" },
new User() {Id = ,UserName="小李",Age=,TelPhone="" },
new User() {Id = ,UserName="小胡",Age=,TelPhone="" },
};
return Json(list);
}
3. 新建Index视图，使用$.post异步调用HomeController中的UserList方法，并更新界面
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("#btnUserList").click(function () {
$.post("/Home/UserList", {}, function (data) {
var result = data;
$.each(result,function(key,value){
$("#divUserList").append(result[key].Id + "\t"
+ result[key].UserName + "\t"
+ result[key].Age + "\t"
+ result[key].TelPhone + "<br/>");
});
});
});
})
</script>
<h2>Index</h2>
<div>
<input type="button" id="btnUserList" value="获取用户信息" />
<div id="divUserList"></div>
</div>
4. 运行结果如下：
三、Ajax辅助方法 Ajax.ActionLink
在ASP.Net MVC框架中包含一组Ajax辅助方法，它们可以用来创建异步表单和指向控制器的异步链接。当使用这些辅助方法时，不需要编写任何脚本代码就可以实现程序异步。
这些Ajax辅助方法依赖于非侵入式MVC的jQuery扩展。如果使用这些辅助方法，就需要引入脚本文件jquery.unobtrusive-ajax.js，并在视图中添加此脚本引用。
1.在项目中添加非侵入式Ajax脚本
使用NuGet搜索“Microsoft JQuery”，安装 非侵入式Ajax脚本，如下图
2.在Home控制器中添加AjaxTest方法，并右键方法添加AjaxTest视图
public ActionResult AjaxTest()
{
return View();
}
3.在Home控制器中添加PartialViewTest方法返回局部视图，并右键方法创建局部视图页
[HttpPost]
public PartialViewResult PartialViewTest()
{
ViewBag.Msg = "Hello World";
return PartialView();
}
PartialViewTest视图
<h2>@ViewBag.Msg</h2>
4.在AjaxTest视图脚本节点中引入非侵入式Ajax脚本
@section scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}
5.使用@Ajax.ActionLink创建异步链接按钮
@Ajax.ActionLink("链接文本","PartialViewTest",new AjaxOptions() {
UpdateTargetId = "divMsg",
InsertionMode = InsertionMode.Replace,
HttpMethod = "Post"
})
AjaxTest视图整体代码如下：
@{
ViewBag.Title = "AjaxTest";
}
<h2>AjaxTest</h2>
@Ajax.ActionLink("链接文本","PartialViewTest",new AjaxOptions() {
UpdateTargetId = "divMsg",
InsertionMode = InsertionMode.Replace,
HttpMethod = "Post"
})
<div id="divMsg"></div>
@section scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}
6.运行Home/AjaxTest，结果如下：
四、Ajax辅助方法 Ajax.BeginForm
1.在Home控制器下创建AjaxForm和UserInfo方法，代码如下：
public ActionResult AjaxForm()
{
return View();
} [HttpPost]
public ActionResult UserInfo(string txtName)
{
List<User> list = new List<User>()
{
new User() {Id = ,UserName="小明",Age=,TelPhone="" },
new User() {Id = ,UserName="小王",Age=,TelPhone="" },
new User() {Id = ,UserName="小赵",Age=,TelPhone="" },
new User() {Id = ,UserName="小李",Age=,TelPhone="" },
new User() {Id = ,UserName="小胡",Age=,TelPhone="" },
};
var result = list.Where(u => u.UserName == txtName).FirstOrDefault();
return Content("姓名："+result.UserName+"\t"+"年龄："+result.Age+"\t"+"电话："+result.TelPhone);
}
2.添加AjaxForm视图，引入非侵入式Ajax脚本，使用Ajax.BeginForm创建异步表单，代码如下：
@{
ViewBag.Title = "AjaxForm";
}
<h2>AjaxForm</h2>
@using (Ajax.BeginForm("UserInfo","Home",new AjaxOptions() {
UpdateTargetId ="divMsg",/*局部更新容器Id*/
InsertionMode = InsertionMode.Replace,/*替换方式*/
HttpMethod = "post",
OnFailure="fail",/*失败后回调js函数*/
OnSuccess="success",/*成功后回调js函数*/
LoadingElementId = "loadingMsg"/*加载元素Id*/
}))
{
<input type="text" name="txtName" />
<input type="submit" />
}
<div id="loadingMsg" style="display:none">加载中......</div>
<div id="divMsg"></div>
@section scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script>
function fail(txt) {
alert("查询失败，失败信息："+txt);
}
function success(txt) {
alert("查询成功，查询信息："+txt);
}
</script>
}
3.运行/Home/AjaxForm，结果如下：
异步Ajax的更多相关文章
- jquery异步ajax超大长度base64图片长字段数据传输问题解决办法和php后台处理办法
2017年5月9日19:25:02 在做在线签名的时候,到了图片上传的时候,使用jquery异步ajax上传base64的图片数据的时候,使用默认的方式进行数据传输偶尔会出现 生产的图片只有上半部分, ...
- vue和jQuery嵌套实现异步ajax通信
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 传统表单提交文件上传，以及FormData异步ajax上传文件
传统的文件上传: 只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单. 以下是另一种方式FormData,有时候我们需要ajax ...
- MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求
假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set ...
- jQuery之异步Ajax请求使用
$.ajax({type:'',data:'',async:''...}) 参数: 1.cache: true缓存页面 false 不缓存页面 (默认: true,dataType为script和js ...
- 同步 异步 AJAX JS
jQuery:$post.$get.$ajax与php,实现异步加载 什么是异步加载? 整个最通俗的说法就是将另外一个页面上的数据通过append() 或者 html()等函数插入到本页上.纯js写法 ...
- 纯JavaScript实现异步Ajax的基本原理
Ajax实际就是XMLHttpRequest对象和DOM.(X)HTML和CSS的简称,用于概括异步加载页面内容的技术. Ajax实例 HTML代码如下,包含一个h5标题和一个按钮: JS代码如下 ...
- 乐观锁机制解决多层嵌套异步ajax问题
前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示,当我们多次快速的多次的发起ajax,因为ajax是异步的,每个ajax触发回调的时间都是不可控的,这样就会造成前面发起的ajax ...
- MVC异步AJAX的三种方法（JQuery的Get方法、JQuery的Post方法和微软自带的异步方法）
异步是我们在网站开发过程中必不可少的方法,MVC框架的异步方法也有很多,这里介绍三种方法: 一.JQuery的Get方法 view @{ Layout = null; } <!DOCTYPE h ...
随机推荐
- BZOJ 2555 SubString（LCT+后缀树）
喜闻乐见的LCT+SAM 此题要求动态插入,直接上后缀树.然后询问其实就是求一个节点的子树后缀结束节点的个数. 因为建立后缀树需要插入和删除,就直接上LCT.每次加入一个点,把它到根的路径加一 (现在 ...
- java实现websocket 终极指南
大概思路: 首先用户登陆 获取用户信息存储到httpsession中,然后客户端链接服务端websocket,首先HandshakeInterceptor这个拦截器会拦截请求 调用 beforeH ...
- python基础5（文件操作，with语句）
打开文件 #使用 open f = open('路径',mode = '打开模式', encoding='编码') #可以使用with语句打开,不需要关闭,可以同时打开多个文件 with open(' ...
- pandas学习笔记 - 文件的写入和输出
# -*- coding: utf-8 -*- """ Created on Tue Aug 28 22:19:26 2018 @author: Dev " ...
- Docker和虚拟机的区别
这是docker官网的图,可以看到虚拟化技术通过Hypervisor(虚拟机管理系统)为每个app启动一个Guest OS(客户机操作系统),也就是为每个app启动一个虚拟机.比较直观地说,vm通过H ...
- Qt之OpenSSL
简述 OpenSSL是一个强大的安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. 简述 下载安装 使用 更多参考 下载安装 ...
- 破解者是如何篡改游戏内数值的，揭秘Android手游破解全过程
由于Android系统的开放性,让人人都是开发者成为可能,也正因如此,手机APP遭受破解和盗版问题长期存在,且愈演愈烈.尤其是手游 行业,如刀塔传奇.植物大战僵尸.2048等知名游戏被破解的案例不胜枚 ...
- jstack命令dump线程信息
jstack命令dump线程信息 D:\Java\jdk1.8.0_05\bin>jstack.exe 6540 > dump17 6540为java 线程pid: 出来的dump17文件 ...
- <转>Openstack ceilometer 宿主机监控模块扩展
<Openstack ceilometer监控项扩展>( http://eccp.csdb.cn/blog/?p=352 )主要介绍了对虚拟机监控项扩展, 比較简单.怎样在ceilomet ...
- 插入排序、冒泡排序、选择排序、希尔排序、高速排序、归并排序、堆排序和LST基数排序——C++实现
首先是算法实现文件Sort.h.代码例如以下: <pre name="code" class="java">/* * 实现了八个经常使用的排序算法: ...