在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. 一个自己实现的js表单验证框架。

    经常要做一些表单验证的操作,每次都是用现成的框架,比如jquery,bootstrap等的验证插件,虽然也很强大,也很好用,可就是用起来需要引入许多js库,还有里面功能太多,感觉不太符合自己的需求.最 ...

  2. 深入理解linux关闭文件和删除文件

    背景介绍 最近看了linux系统编程(linux system programming)一书,结合深入理解linux内核(understanding the linux kernel)一书,深入理解了 ...

  3. 配置docker官方源并用yum安装docker

    一.docker的官方安装文档: https://docs.docker.com/engine/installation/linux/centos/ 由docker给的文档可以看出它也只是去配置了一个 ...

  4. log4j学习（二） 不要用log4j了，用slf4j + logback吧

    标题比较尴尬,log4j学习系列的最后一篇是放弃log4j    - -!  一. 简介 log4j的作者提出了slf4j,简单日志门面,相当于是一套统一的java日志api,是个接口标准,编程时使用 ...

  5. Android 追加写入文件的三种方法

    一.使用FileOutputStream 使用FileOutputStream,在构造FileOutputStream时,把第二个参数设为true public static void method1 ...

  6. Shell-14--awk

    awk ' 条件1{ 动作1} 条件2{动作2}...' 文件名 awk处理数据是 先读取第一行 然后再去处理 printf 不会加入换行符,需要手动加入 print 会自动加换行 begin 是在后 ...

  7. C#基础-gc算法

    众所周知,c++是需要程序员手动管理内存的,然而手动释放内存很容易被程序员遗漏,从而导致资源浪费或内存泄露.为解决这个问题,垃圾回收器诞生了,代替程序员自动管理内存的释放.至于gc算法则是垃圾回收器清 ...

  8. 推荐一个实用的 .gitignore 文件

    为什么要忽略文件? 常用的版本控制工具,不管是使用 git 还是 svn,我们都需要排除一些与程序代码无关的文件,如像 eclipse/ intellij idea 等 IDE 工具留下来的 .set ...

  9. 30-socketserver类

    SocketServer模块简化了编写网络服务程序的任务.同时SocketServer模块也是Python标准库中很多服务器框架的基础. socketserver模块可以简化网络服务器的编写,Pyth ...

  10. 边缘化搭建 DotNet Core 2.1 自动化构建和部署环境(下)

    写在前面 本篇文章是上一篇边缘化搭建 DotNet Core 2.1 自动化发布和部署(上)的后续操作,本文主要讲解如何开启Docker Remote API,开启Remote API后的权限安全问题 ...