异步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 ...
随机推荐
- [USACO4.1]篱笆回路Fence Loops
题目:USACO Training 4.1(在官网上提交需加文件输入输出).洛谷P2738. 题目大意:给你一张图里的边集,让你求出这张图的最小环. 解题思路:求最小环很简单,用Floyd即可.最重要 ...
- Maven命令下载源码和javadocs
1:Maven命令下载源码和javadocs 当在IDE中使用Maven时如果想要看引用的jar包中类的源码和javadoc需要通过maven命令下载这些源码,然后再进行引入,通过mvn命令能够容易的 ...
- Git日常操作指令
1. 将本地项目上传到码云: ①. 码云上创建一个项目 ②. 本地文件项目内右键git bash进入git控制台 ③. git init 命令 -- 会在本地创建一个.git文件夹 ④. git ...
- virtualbox挂载目录失败mount: unknown filesystem type ‘vboxsf’
转自[https://blog.csdn.net/u011486871/article/details/79443375] [有小修改] 错误提示:Vagrant was unable to moun ...
- PHP JWT初识
一直没有好好看过jwt,直到前两天要做web验证,朋友给我推荐了jwt.才发现jwt已经被大家广泛的应用了.看来我有点out了.哈哈,趁着这个世界来好好看看这个. JWT(JSON Web Token ...
- django orm 基本
1 modle基本数据类型 class Test(models.Model): """测试学习用""" Auto = models.Auto ...
- android:Activity启动模式之singleTask(一)
先看一下standard启动模式的说明: 仅仅有一个实例.在同一个应用程序中启动他的时候.若不存在此Activity实例.则会在当前栈顶创建一个新的实例.若存在,则会把栈中在其上的其他Activity ...
- poj_1195Mobile phones,二维树状数组
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...
- django 笔记13 CSRF
CSRF a. CSRF原理 b. 无CSRF时存在隐患 c. Form提交(CSRF) d. Ajax提交(CSRF) CSRF请求头 x-CSRFToken HTTP_X_CSRFToken dj ...
- MyBatis、JDBC、Hibernate区别
从层次上看,JDBC是较底层的持久层操作方式,而Hibernate和MyBatis都是在JDBC的基础上进行了封装使其更加方便程序员对持久层的操作. 从功能上看, JDBC就是简单的建立数据库连接,然 ...