在MCV中使用异步请求可以很很高效地进行前台和后台的数据传递，在这里，笔者为初学者介绍两种在MVC中常用的异步请求处理方式。

在这里，我们通过在一个页面中放置一个按钮来异步获取当前服务器端的系统时间为例进行讲述。

第一种：使用JQuery方式进行异步请求

由于在最新的VS中（笔者用的是13版的），当我们创建一个MVC项目时，VS会自动向项目中添加JQuery库，所以我们只需要将相应的库引入到我们的项目中即可。

1、创建一个MVC4的基本项目，使用Razor视图引擎。然后创建一个Controller，取名为Home，并在Home.cs中添加一个Action来模拟从服务器端获取系统时间，示例代码：

public ActionResult GetDate()

{

       System.Threading.Thread.Sleep();

       return Content(DateTime.Now.ToString());

}

2、创建一个Controller，取名为HomeController，并创建一个Action和一个视图和一个用来模拟从服务器获取数据的Action，示例代码：

public class HomeController : Controller

    {

        //

        // GET: /Home/

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult GetDate()

        {

            //模拟延迟发送数据

            System.Threading.Thread.Sleep();

            return Content(DateTime.Now.ToString());

        }

        public ActionResult JQueryModel()

        {

            return View();

        }

    }

3、在对应的JQueryModel.cshtml文件中进行异步请求，示例代码：

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>JQueryModel</title>

    <script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //方法1：

            $("#btn").click(function() {

                $.get("/Home/GetDate",              //格式：/Controller/Action

                    null,                           //传递过去的数据

                    function (data) {               //请求成功后的回调函数

                        alert(data);

                    }

                );

                //方式2：

                $.ajax({

                    url: "/Home/GetDate",           //请求的地址（格式）：/Control/Action

                    type: "POST",                   //发送请求的方式

                    success: function(data) {       //发送成功后的回调函数

                        alert(data);

                    }

                });

            });

        });

    </script>

</head>

<body>

    <div>

        <input type="button" id="btn" value="获取服务器端系统时间"/>

    </div>

</body>

</html>

通过上面提供的两种JQuery就可以用异步请求的方式来获取服务器端数据。

第二种：使用自带方式进行异步请求

1、创建一个Action，取名为MvcModel，并为其创建一个视图，示例代码：

public ActionResult MvcModel()

{

     return View();

}
@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>MvcModel</title>

    <script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>

    <script src="../../Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script type="text/javascript">

        function success(data) {

            alert(data);

        }

    </script>

</head>

<body>

    <div>

        @using (Ajax.BeginForm("GetDate", "Home",new AjaxOptions()

        {

            HttpMethod = "POST",

            OnSuccess = "success"

        }))

        {

            <div>

                <input type="submit" id="btn" value="获取服务器端系统时间" />

            </div>

        }

    </div>

</body>

</html>

通过这个方法，我们依然可以获取到服务器端系统时间。

笔者认为，这两种方法并没有什么优劣之分，关键是需要看开发中具体情况使用较为方便的方法，通过以上的实例，希望新手可以对MVC中的异步请求有一定的了解。

MVC中使用JQuery方式进行异步请求和使用自带方式进行异步请求的更多相关文章

  1. [转]如何在.NET MVC中使用jQuery并返回JSON数据

    本文转自:http://blog.sina.com.cn/s/blog_48e42dc90100xp1p.html 二.开始实践 - jQuery端 假设我们要从服务器端获取一个文章列表,并把文章条目 ...

  2. asp.net mvc中使用jquery H5省市县三级地区选择控件

    地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...

  3. 如何在.NET MVC中使用jQuery并返回JSON数据

    http://blog.csdn.net/dingxingmei/article/details/9092249 开始实践 - jQuery端 假设我们要从服务器端获取一个文章列表,并把文章条目显示在 ...

  4. MVC中使用jquery的浏览器缓存问题

    jquery在浏览器ajax调用的时候,对缓存提供了很好的支持,POST方式不能被缓存,使用POST的原因,明确了数据不能被缓存,或者避免JSON攻击(JSON返回数据的时候可以被入侵) jquery ...

  5. MVC 中引入Jquery文件的几种方法

    方法1: <script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/ ...

  6. ASP.NET MVC 中使用 jQuery 实现异步搜索功能

    常见的几种异步请求方式: Ajax.BeginForm   异步提交文本的形式 Ajax.ActionLinkk 文本链接的形式 Client Validataion  客户端的认证 一.用jQuer ...

  7. ASP.NET MVC中使用jQuery时的浏览器缓存问题

    介绍 尽管jQuery在浏览器ajax调用的时候对缓存提供了很好的支持,还是有必要了解一下如何高效地使用http协议. 首先要做的事情是在服务器端支持HTTP GET,定义不同的URL输出不同的数据( ...

  8. 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点

    使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...

  9. MVC中使用jquery uploadify上传图片报302错误

    使用jquery uploadify上传图片报302错误研究了半天,发现我上传的action中有根据session判断用户是否登录,如果没有登录就跳到登陆页,所以就出现了302跳转错误.原来更新了fl ...

随机推荐

  1. navicat for mysql安装与破解

    Windows系统的电脑 navicat for mysql 的安装软件以及破解包 方法/步骤     从网上下载需要用到的navicat for mysql 的安装软件以及破解包.   双击navi ...

  2. 六.使用python操作mysql数据库

    数据库的安装和连接 pymysql的安装              pip install PyMySQL python连接数据库 import pymysql db = pymysql.connec ...

  3. Swift学习目录

    本学习基于苹果官方Swift学习材料,保留了原版90%左右的内容(一些项目开发中基本不用的知识点没有整理),并根据理解进行整理.如对原版感兴趣,可以直接单击链接阅读和学习. 第一部分 基础篇 1.基本 ...

  4. House of Spirit学习调试验证与实践

    作家:Bug制造机 原文来自:House of Spirit学习调试验证与实践 House of Spirit和其他的堆的利用手段有所不同.它是将存在的指针改写指向我们伪造的块(这个块可以位于堆.栈. ...

  5. 火狐浏览器安装 Modify Headers 插件

    一.火狐浏览器插件安装 这里以火狐浏览器的Modify Headers插件安装为例,展示火狐插件的安装: 1.打开火狐浏览器,右上角选择“附加组件” 2.搜索Modify Headers插件 3.安装 ...

  6. ie8兼容视频播放的探索（探索过程稍微有点长，时间紧迫和耐心稍微差一点点的小伙伴直接往下拉）

    需求: 前几天接到一个需求,需要在网页中嵌入视频,并且要兼容ie8:然后我就开始了如下的探索...... 探索过程: 我先思考有什么方法可以在网页中嵌入视频,然后找到2种常用的方法——video标签和 ...

  7. MySQL：字符串字段加索引

    1. 使用方式 1.1 全字段加索引 给整个字段加索引,索引存储整个字段的值. 数据量较小时,查询成本高,准确度高: 数据量较大时,比较耗费空间: 1.2 前缀索引 MySQL支持前缀索引,可以定义字 ...

  8. LeetCode--No.016 3Sum Closest

    16. 3Sum Closest Total Accepted: 86565 Total Submissions: 291260 Difficulty: Medium Given an array S ...

  9. Liferay7 BPM门户开发之19: 理解Service Builder体系

    Service Builder是Liferay为业务开发而设计的模型驱动(model-driven)平台工具,提供一系列的实体类.数据持久化.服务相关的代码自动生成服务.支持Hibernate and ...

  10. python（33）——【re模块】

    re模块(正则表达式) 就其本质而言,正则表达式是一种小型的.高度专业化的编程语言 在Python中(它内嵌在python中),并通过re模块来实现,正则表达式被编译成一系列的字节码,然后由C编写的匹 ...