在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. php上传图片预览，放大，裁剪

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 通过MFC设计一个简单的计价程序

    1.实验目的 掌握使用MFC应用程序向导创建应用程序的方法. 掌握新建对话框资源的方法. 掌握生成对话框的方法. 2.实验内容 用应用程序创建一个默认的对话框应用程序,在对话框中能进入下一个对话框,在 ...

  3. RxSwift学习笔记9：amb/tabkeWhile/tabkeUntil/skipWhile/skipUntil

    //amb基本介绍 //当传入多个 Observables 到 amb 操作符时,它将取第一个发出元素或产生事件的 Observable,然后只发出它的元素. //并忽略掉其他的 Observable ...

  4. Python之旅Day3 文件操作 函数（递归|匿名|嵌套|高阶）函数式编程 内置方法

    知识回顾 常见五大数据类型分类小结:数字.字符串.列表.元组.字典 按存值个数区分:容器类型(列表.字典.元组) 标量原子(数字.字符串) 按是否可变区分:可变(列表.字典) 不可变(数字.字符串.元 ...

  5. hiho 第六周 01背包

    简单的01背包,没有报名,这周的没有权限提交 #include<iostream> #include<memory.h> using namespace std; #defin ...

  6. InnoDB体系架构（二）内存

    InnoDB体系架构(二)内存 上篇文章 InnoDB体系架构(一)后台线程 介绍了MySQL InnoDB存储引擎后台线程:Master Thread.IO Thread.Purge Thread. ...

  7. [git] commit 相关的操作

    本地仓库状态相关的操作 1.  git  commit 将从上次提交后到现在这段时间内,暂存区所有的变化提交到版本库中: git  commit  -m '此次提交操作的简要说明(单引号括起来)' c ...

  8. python编译生成的.pyc作用

    如果 Python 进程在机器上拥有写入权限,那么它将把程序的字节码保存为一个以 .pyc 为扩展名的文件( ".pyc" 就是编译过的 ".py" 源代码). ...

  9. 关于Ubuntu拒绝root用户ssh远程登录

    #sudo vim /etc/ssh/sshd_config 找到并用#注释掉这行:PermitRootLogin prohibit-password 新建一行 添加:PermitRootLogin ...

  10. 从零开始学 Spring Boot

    1.下载 spring-tool-suite https://spring.io/tools3/sts/legacy 2.解压运行 sts-bundle\sts-3.9.7.RELEASE\STS.e ...