在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. ScriptOJ-flatten2#91

    generator的使用 function *flatten2 (arr) { const result = [] function flatten(ar) { ar.map(iter => { ...

  2. SQL SERVER占用CPU过高优化

    操作系统是Windows2008R2 ,数据库是SQL2014 64位. 近阶段服务器出现过几次死机,管理员反馈机器内存使用率100%导致机器卡死.于是做了个监测服务器的软件实时记录CPU数据,几日观 ...

  3. 牛客JS编程大题（二）

    11.统计数组 arr 中值等于 item 的元素出现的次数 function count(arr, item) { var num = 0; for(var i = 0;i < arr.len ...

  4. maya2014卸载/安装失败/如何彻底卸载清除干净maya2014注册表和文件的方法

    maya2014提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2014失败提示maya2014安装未完成,某些产品无法安装,也有时候想重新安装maya ...

  5. Android 上传文件到 FTP 服务器

    实现背景 近期接触到一个需求,就是将文件从Android系统上传到FTP服务器,虽然之前接触过FTP服务器,了解基本的使用流程,但是将此流程从使用习惯转化为代码实现还是有一定难度的.但是基本的流程还是 ...

  6. Java 实现网络图片的读取与下载

    //网络图片的下载,读取与删除 public static void fileDowAndDel(String httpurl){ try { URL url = new URL(httpurl); ...

  7. Android基础-系统架构分析，环境搭建，下载Android Studio，AndroidDevTools，Git使用教程，Github入门，界面设计介绍

    系统架构分析 Android体系结构 安卓结构有四大层,五个部分,Android分四层为: 应用层(Applications),应用框架层(Application Framework),系统运行层(L ...

  8. 第30节：Java基础-内部类

    内部类 // 外部类 class Demo{ private int num = 3; // 定义内部类 class Int{ void show(){ System.out.println(&quo ...

  9. [WINForm]C#应用程序图标设置问题

    在屏幕分辨率大小不一的情况下,应用程序的图标有些电脑显示合适,有些电脑显示在图标中间出现过多空白边距: 处理方式: 1.在vs中打开ico图片 2.在图标空白处右键添加新图像类型 3.选择自己需要的尺 ...

  10. js 解析url中search时存在中文乱码问题解决方案

    一 问题出现原因 当存在这样一种需求,前端需要通过url中search返回值进行保存使用,但如果search中存在中文解析出来会导致乱码.这个问题我找了很久原因,最后终于知道解决方案,这里和大家分享一 ...