异步是我们在网站开发过程中必不可少的方法，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. smtp

    新闻系统的定时通知初步有三种实用方式,1.短信 2.邮箱 3.微信 短信就不得不使用第三方平台,虽说5分一条,但耐不住量大,一天1000条的话,50元也是一笔不小的支出. 这时,邮箱和微信的优势就体现 ...

  2. Java复习总结——数据类型

    包装类型 八个基本类型: Boolean/boolean/1 Byte/byte/8 Character/char/16 Short/short/16 Integer/int/32 Float/flo ...

  3. 20165223 结对编程之四则运算week2-整体总结

    目录 一.结对对象 二.需求分析 三.设计思路 四.核心代码 五.功能截图 六.结对感受 一.结对对象 担任角色(本周交换角色,流动学习) 驾驶员(Driver):20165218 赵冰雨(是控制键盘 ...

  4. VMware配置centos虚拟机静态ip

    1. 安装centos,这个自己安装就好了 2. 配置配置虚拟机静态ip桥接器 配置ip地址 2. 配置网络共享中心 这里面的默认网关填写之前我们配置的网络网关ip默认为192.168.6.2 3. ...

  5. 【洛谷 P2430 严酷的训练】

    题目背景 Lj的朋友WKY是一名神奇的少年,在同龄人之中有着极高的地位... 题目描述 他的老师老王对他的程序水平赞叹不已,于是下决心培养这名小子. 老王的训练方式很奇怪,他会一口气让WKY做很多道题 ...

  6. react-native中的TextInput

    TextInput是一个允许用户输入文本的基础组件.它有一个名为onChangeText的属性,此属性接受一个函数, 而此函数会在文本变化时被调用.另外还有一个名为onSubmitEditing的属性 ...

  7. 灰度发布/AB test

    背景 互联网产品有一个特点,就是不停的升级,升级,再升级.一般采用敏捷开发的团队,基本上保持每周一次的发布频率,系统升级总是伴随着风险,新旧版本兼容的风险,用户使用习惯突然改变而造成用户流失的风险,系 ...

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

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

  9. Day9--Python--函数入门

    函数神马是函数: 函数是对功能或动作的封装函数的定义: def 函数名(形参列表): #参数 函数体(return) 调用: ret = 函数名(实参列表) 函数名就是变量名: 函数名的命名规则:变量 ...

  10. 高级组件——工具栏JToolBar

    import javax.swing.*; import java.awt.*; public class Demo extends JFrame { public Demo() { setTitle ...