异步是我们在网站开发过程中必不可少的方法,MVC框架的异步方法也有很多,这里介绍三种方法:

一.JQuery的Get方法

view

@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
@*我们使用JQ的异步方式获取后台的时间*@
<script type="text/javascript">
$(function() {
$("#btnJQ").click(function() {
//从后台获取时间
$.get("/Ajax/GetDate",{}, function(data) {
alert(data);
});
});
});
</script>
</head>
<body>
<div>
<input type="button" id="btnJQ" value="获取服务器的时间"/> </div>
</body>
</html>

二.JQuery的Post方法

view

@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
@*我们使用JQ的异步方式获取后台的时间*@
<script type="text/javascript">
$(function() {
$("#btnJQ").click(function() {
//从后台获取时间
$.ajax({
url: "/Ajax/GetDate",//请求地址
type: "POST",//请求的类型
success: function(data) { //成功后的回调函数
alert(data);
},
data:"id=2&name=222"//传递的数据
});
});
});
</script>
</head>
<body>
<div>
<input type="button" id="btnJQ" value="获取服务器的时间"/> </div>
</body>
</html>

三.微软自带的异步方法

view

@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MicrosoftAjax</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
function afterSuccess(data) {
//alert(data);
}
</script>
</head>
<body>
<div>
@using (Ajax.BeginForm("GetDate", "Ajax", new AjaxOptions(){
Confirm ="您是否要提交吗?", //用来在提交前做个提醒是否提交
HttpMethod = "Post", //提交的方式是get还是post
InsertionMode = InsertionMode.Replace, //这个插入的模式InsertAfter:在后面追加 InsertBefore:在现有文本之前 Replace:替换
UpdateTargetId = "result", //更新对应目标Id的标签的内容
OnSuccess="afterSuccess", //执行成功之后执行的方法
LoadingElementId = "loading"} //在没有返回结果之前显示的图片
)
)
{
<div>
用户名:<input type="text" name="UserName" /><br />
密码:<input type="text" name="Pwd"/><br />
<input type="submit" value="提交"/>
</div>
}
<div id="result"> </div> <div id="loading" style="display:none">
<img src="~/Content/ico_loading2.gif" />
</div>
</div>
</body>
</html>

三个异步对应的Controllers

public class AjaxController : Controller
{
//
// GET: /Ajax/ public ActionResult Index()
{
return View();
} public ActionResult GetDate()
{
//让网站睡眠1秒钟
System.Threading.Thread.Sleep(1000);
return Content(DateTime.Now.ToString());
} public ActionResult MicrosoftAjax()
{
return View();
} }

注意:采用Jquery方式提交数据的的主要实现方案就是通过Jquery的get或者post方法,发送请求到MVC的controller中,然后处理获取的response,更新到页面中。

微软自带的方法更加全面实用,合理运用其属性值,会得到意向不到的效果。

MVC异步AJAX的三种方法(JQuery的Get方法、JQuery的Post方法和微软自带的异步方法)的更多相关文章

  1. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  2. Ajax的三种实现及JSON解析

    本文为学习笔记,属新手文章,欢迎指教!! 本文主要是比较三种实现Ajax的方式,为以后的学习开个头. 准备: 1.  prototype.js 2.  jquery1.3.2.min.js 3.  j ...

  3. ajax 使用 三种方法 设置csrf_token的装饰器

    1. CSRF中间件   CSRF跨站请求伪造 2. 补充两个装饰器  from django.views.decorators.csrf import csrf_exempt, csrf_prote ...

  4. jquery 绑定,mvc和webform的三种方式

    asp.net里的绑定方式,on的绑定方式无效 $('#SelCommandType').bind('click', function () { }); mvc里的绑定方式 $('#DownList' ...

  5. 瀑布流的三种实现方式(原生js+jquery+css3)

    前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...

  6. javascript中定义事件的三种方式 分类: C1_HTML/JS/JQUERY 2014-08-07 10:27 634人阅读 评论(0) 收藏

    在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使 ...

  7. 三种Shell脚本编程中避免SFTP输入密码的方法

    最近编程中用到sftp上传文件,且需要用crontab预设定时上传事件.而sftp不同于ftp,没有提供选项如 -i 可以将密码直接编码进程序.使用sftp指令,会自动请求用户输入密码. 总结一下可以 ...

  8. ajax 的三种使用方法

    第一种 也是最古老的一种方法之一 from 表单直接提交数据到php文件里 action为路径 <form method="post" action="./inde ...

  9. MVC 添加数据的三种方法

    1 通过Request接收数据,进行添加 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<d ...

随机推荐

  1. Age of Moyu HDU - 6386 (杭电多校7A)

    给出n和点,m条边,每条边有各自的标号,进入第一个标号需要消耗1的费用,此后转换标号需要1费用,在同一个标号上走不需要费用.问你从1到n最少需要多少费用. 最短路变形,把第一个点看成不存在的标号,然后 ...

  2. list根据某个字段去重

    方法一:使用Set List<User> newList = new ArrayList<User>(); Set<String> set = new HashSe ...

  3. css 多行文本的溢出显示省略号(移动端)

    多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...

  4. yzh的神仙题

    U66905 zz题 考虑一个点权值被计算了多少次...不知 所以对未来承诺,方便直接算上总数! 然后其实是给边定向,即先删除fa和son的哪一个 f[x][j],会计算j次 无法转移 f[x][j] ...

  5. 【听RQY大佬“训话”有感】

    今天听了山东省“红太阳”——RQY大佬(dalao获奖传送门)的讲话,做一下总结及感悟: 总结: 1.基础重要!!!.基础重要!!!.基础重要!!!(重要的事情说三遍) 只要基础好了,后面知识都很简单 ...

  6. 腾讯云centos安装python3.6和pip

    不知道腾讯云的centos和阿里云的centos一不一样,反正两个云平台的Ubuntu系统是不一样的,照着同样的教程敲,往往掉坑里. 安装一些centos依赖库: 这一步很关键,很多报错往往都因为少了 ...

  7. Spring MVC 架构的java web工程如何添加登录过滤器

    发布到外网的web工程必须添加登录过滤器来阻挡一些非法的请求,即只有登录的用户才能对web工程进行请求,否则无论请求什么资源都需要调整到登录页面进行登录操作.这时就需要用到过滤器,其实非常简单,只需要 ...

  8. Druid 配置及内置监控,Web页面查看监控内容 【我改】

    转: Druid 配置及内置监控,Web页面查看监控内容 1.配置Druid的内置监控 首先在Maven项目的pom.xml中引入包 1 2 3 4 5 <dependency>      ...

  9. C实现读写文件

    https://www.cnblogs.com/zhanghongfeng/p/7726199.html https://www.cnblogs.com/xudong-bupt/p/3478297.h ...

  10. Percona xtrabackup

    关于percona xtrabackup     percona xtrabackup是世界上唯一开源的.免费的MySQL热备份软件,可以为InnoDB存储引擎和XtraDB存储引擎进行不间断的备份, ...