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

一.JQuery的Get方法

view

  1. @{
  2.     Layout = null;
  3. }
  4.  
  5. <!DOCTYPE html>
  6.  
  7. <html>
  8. <head>
  9.     <meta name="viewport" content="width=device-width" />
  10.     <title>Index</title>
  11.     <script src="~/Scripts/jquery-1.8.2.js"></script>
  12.     @*我们使用JQ的异步方式获取后台的时间*@
  13.     <script type="text/javascript">
  14.         $(function() {
  15.             $("#btnJQ").click(function() {
  16.                 //从后台获取时间
  17.                 $.get("/Ajax/GetDate",{}, function(data) {
  18.                     alert(data);
  19.                 });
  20.             });
  21.         });
  22.     </script>
  23. </head>
  24. <body>
  25.     <div>
  26.         <input type="button" id="btnJQ" value="获取服务器的时间"/>
  27.  
  28.     </div>
  29. </body>
  30. </html>

二.JQuery的Post方法

view

  1. @{
  2.     Layout = null;
  3. }
  4.  
  5. <!DOCTYPE html>
  6.  
  7. <html>
  8. <head>
  9.     <meta name="viewport" content="width=device-width" />
  10.     <title>Index</title>
  11.     <script src="~/Scripts/jquery-1.8.2.js"></script>
  12.     @*我们使用JQ的异步方式获取后台的时间*@
  13.     <script type="text/javascript">
  14.         $(function() {
  15.             $("#btnJQ").click(function() {
  16.                 //从后台获取时间
  17.                 $.ajax({
  18.                     url: "/Ajax/GetDate",//请求地址
  19.                     type: "POST",//请求的类型
  20.                     success: function(data) {  //成功后的回调函数
  21.                         alert(data);
  22.                     },
  23.                     data:"id=2&name=222"//传递的数据
  24.                 });
  25.             });
  26.         });
  27.     </script>
  28. </head>
  29. <body>
  30.     <div>
  31.         <input type="button" id="btnJQ" value="获取服务器的时间"/>
  32.  
  33.     </div>
  34. </body>
  35. </html>

三.微软自带的异步方法

view

  1. @{
  2.     Layout = null;
  3. }
  4.  
  5. <!DOCTYPE html>
  6.  
  7. <html>
  8. <head>
  9.     <meta name="viewport" content="width=device-width" />
  10.     <title>MicrosoftAjax</title>
  11.     <script src="~/Scripts/jquery-1.8.2.js"></script>
  12.     <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
  13.     <script type="text/javascript">
  14.         function afterSuccess(data) {
  15.             //alert(data);
  16.         }
  17.     </script>
  18. </head>
  19. <body>
  20.     <div>
  21.         @using (Ajax.BeginForm("GetDate", "Ajax", new AjaxOptions(){
  22.             Confirm  ="您是否要提交吗？",  //用来在提交前做个提醒是否提交
  23.             HttpMethod = "Post",   //提交的方式是get还是post
  24.             InsertionMode = InsertionMode.Replace,  //这个插入的模式InsertAfter:在后面追加    InsertBefore：在现有文本之前    Replace：替换
  25.             UpdateTargetId = "result",  //更新对应目标Id的标签的内容
  26.             OnSuccess="afterSuccess",   //执行成功之后执行的方法
  27.             LoadingElementId = "loading"}  //在没有返回结果之前显示的图片
  28.             )
  29.             )
  30.         {
  31.             <div>
  32.                 用户名：<input type="text" name="UserName" /><br />
  33.                 密码：<input type="text" name="Pwd"/><br />
  34.                 <input type="submit" value="提交"/>
  35.             </div>
  36.         }
  37.         <div id="result">
  38.  
  39.         </div>
  40.  
  41.         <div id="loading" style="display:none">
  42.             <img src="~/Content/ico_loading2.gif" />
  43.         </div>
  44.     </div>
  45. </body>
  46. </html>

三个异步对应的Controllers

  1. public class AjaxController : Controller
  2.     {
  3.         //
  4.         // GET: /Ajax/
  5.  
  6.         public ActionResult Index()
  7.         {
  8.             return View();
  9.         }
  10.  
  11.         public ActionResult GetDate()
  12.         {
  13.             //让网站睡眠1秒钟
  14.             System.Threading.Thread.Sleep(1000);
  15.             return Content(DateTime.Now.ToString());
  16.         }
  17.  
  18.         public ActionResult MicrosoftAjax()
  19.         {
  20.             return View();
  21.         }
  22.  
  23.     }

注意：采用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. bzoj4337树的同构

    树是一种很常见的数据结构. 我们把N个点,N-1条边的连通无向图称为树. 若将某个点作为根,从根开始遍历,则其它的点都有一个前驱,这个树就成为有根树. 对于两个树T1和T2,如果能够把树T1的所有点重 ...

  2. 【模板】splay维护序列

    题目大意:维护一个长度为 N 的序列,支持单点插入,单点询问. 注意事项如下: build 函数中要记得初始化 fa. 插入两个端点值. 代码如下 #include <bits/stdc++.h ...

  3. MyQR库自动为网址生成二维码

    首先安装MyQR库: pip install MyQR #导包 from MyQR import myqr #生成二维码 words=你要为那个网址生成二维码 save_name=保存后的图片名 pi ...

  4. 如何测试连接MsSQL数据库-------UDL文件

    http://www.xinnet.com/service/cjwt/idc/sjk/1360.html 如果您所使用的 SQL Server 数据库连不上,可以通过这个方法进行测试数据库连接. 温馨 ...

  5. hdu 2159FATE(完全背包)

    传送门 https://www.cnblogs.com/violet-acmer/p/9852294.html 题解: 思路一:完全背包转“01”背包 考虑到第ki个怪最多杀min(m/b[ki],s ...

  6. rm刷机 root

    http://www.miui.com/download-290.html http://www.miui.com/shuaji-329.html    小米稳定版 不可以root 只有升级到上面的开 ...

  7. java中不定参数的使用

    https://www.cnblogs.com/xy-hong/p/7192796.html

  8. Spring Cloud Netflix Eureka: 多网卡环境下Eureka服务注册IP选择问题

    https://blog.csdn.net/neosmith/article/details/53126924 通过源码可以看出,该工具类会获取所有网卡,依次进行遍历,取ip地址合理.索引值最小且不在 ...

  9. ajax 小练习

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  10. python自动化开发-[第六天]-常用模块、面向对象

    今日概要: 1.常用模块 - os模块 - random模块 - shutil模块 - hashlib模块 - pickle/json模块 - shelve模块 - configparser模块 - ...