异步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 ...
随机推荐
- POJ-1113 Wall 计算几何 求凸包
题目链接:https://cn.vjudge.net/problem/POJ-1113 题意 给一些点,求一个能够包围所有点且每个点到边界的距离不下于L的周长最小图形的周长 思路 求得凸包的周长,再加 ...
- linux 空间不够了 修改 /boot
1> 查看空间多少:df -h2> 查看当期内核: uname -r3> 查找内核 rpm -qa | grep kernel4> 删除多余的内核 yum remo ...
- 【BZOJ 1452】 [JSOI2009]Count
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 维护一百个二维树状数组. 二维区间求和. [代码] #include <bits/stdc++.h> #define L ...
- 【图灵杯 A】谷神的赌博游戏
[题目链接]:http://oj.acmclub.cn/problem.php?cid=1164&pid=0 [题意] [题解] 把每个数字都%3处理; 会发现最后1的个数为n+1 2和0的个 ...
- 程序设计基石与实践系列之编写高效的C程序与C代码优化
原文出处: codeproject:Writing Efficient C and C Code Optimization 虽然对于优化C代码有非常多有效的指导方针,可是对于彻底地了解编译器和你工作的 ...
- "duplicate symbol for architecture i386" 解决的方法
我在写项目的过程中,碰到了这个错误,我在网上查了一下,发现这个错误的原因是,project里面有反复的类. 解决方式:找到反复的类,然后删除掉就好了. 分析一下, 如图. 能够看出, 错误类型是 du ...
- datatable 前台和后台数据格式
datatable是很强大的前台表格插件,前台定义好表格格式后,后台须要返回指定格式的json数据! 例如以下: 首先是js的定义: var oTable = $('#sample_editable_ ...
- 设计模式-策略模式(Go语言描写叙述)
好久没有更新博客了.近期也是在忙着充电,今天这篇博客開始,我们来了解一下设计模式. 设计模式 那什么是设计模式呢?首先来看看我从百科上copy下来的概念吧. 设计模式/软件设计模式(Design pa ...
- jsp布局中关于<iframe>标签的使用
iframe 元素会创建包括另外一个文档的内联框架(即行内框架). 注意:在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素. & ...
- 《鸟哥的Linux私房菜-基础学习篇（第三版）》（三）
第2章 Linxu怎样学习 1. Linux当前的应用角色 当前的Linux常见的应用可略分为企业应用和个人应用双方面. 首先谈了企业环境的利用. 1)网络server. 2)关键任务 ...