在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. CentOS操作系统防火墙添加例外端口

    http://blog.csdn.net/inrgihc/article/details/63392004 CentOS6与CentOS7添加防火墙例外端口的命令不用,需单独来说: (1)CentOS ...

  2. MySQL DDL--ghost执行模板和参数

    常用GHOST模板 ##================================================## mysql_ip="127.0.0.1" mysql_ ...

  3. vue高级组件之provide / inject

    转载:https://blog.csdn.net/Garrettzxd/article/details/81407199 在vue中不同组件通信方式如下 1.父子组件,通过prop 2.非父子组件,通 ...

  4. Math.round()，Math.ceil()，Math.floor()

    Math.round() :round周围,求一个附近的 整数 小数点后第一位 < 5 正数:Math.round(10.48)       //  10 负数:Math.round(-10.4 ...

  5. 1.viewpager

    ViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view. ViewPager类直接继承了ViewGroup类,所以它是一个容器类,可以在其中添加其他的view类. ...

  6. HTTP 协议基础概念和报文结构

    基础概念 1.WWW(World Wide Web,万维网)构建技术有3项: (1)把SGML(Standard Generalized Markup Language,标准通用标记语言)作为页面的文 ...

  7. 理解js中的函数调用和this

    概述 这是我看typescript的时候看引用资源看到的,原文在这里:Understanding JavaScript Function Invocation and "this" ...

  8. Javascript百学不厌 - this

    最近看了一本书,让自己的野路子走走正规路线 方法调用模式: 方法:当一个函数被保存为对象的一个属性时,我们称它为一个方法. var obj = { fun1: function() {this} // ...

  9. mysql升级8.0后项目不能连接问题

    转载简书:https://www.jianshu.com/p/a164d582e5d9 主要是因为驱动配置变了driver中得用com.mysql.cj.jdbc.Driver,多了个cj: url后 ...

  10. [源码]Dephi溢出demo( Shellcode for XP)

    [源码]Dephi溢出demo( Shellcode for XP) unit Unit1; interface uses Windows, Messages, SysUtils, Variants, ...