MVC的Ajax的异步请求

在这里小写一下MVC的异步请求的一点小总结。

个人认为是有两种的，一种就是跟webform一样的，依旧是使用jQuery的$.get()方法，只是请求地址不同，webform是请求的那个cs文件，而MVC是请求控制器下面的那个方法，其余两个参数也就都一样了。其区别如下（可见下面视图中的代码，此处附图，以示区别之处）：

。

另外一种就是用隐式的异步请求，其写法如下：

小解释一下这代码，Ajax.BeginForm中的三个参数，第一个是方法名，第二个是控制器的名字，第三个就是异步的选项了，HttpMethod表示的是请求的HTTP的方法。Onsuccess表示更新页面成功后要调用js方法，也就是说这里的afterSuccess是我们要写的一个函数，当页面加载成功后就执行此函数，Confrim则是可以弹一个窗口的，会有确定有取消的选项，内容自然就是上面的“小杜确定想知道现在几点吗?”,然后我们在上面写的afterSuccess方法是显示当前时间的，当我们点确定时，就会弹窗并且显示当前时间。也就是这样：

和这样：。

另外说一下上面的Ajax.BeginFrom的写法其实会编译成这样：

具体的可见下面的代码，这代码呢，也是我从源代码那里copy过来略改了一下的，其中上面的Confrim就相当于此处的data-ajax-confirm,OnSuccess就相当于此处的data-ajax-success。这个可以认为是纯前端的MVC,讲究的是js是行为，HTML就相当于页面。其追求的是完整的分离。CSS,HTML,JS做到完整的分离，耦合做到最低。这样就可以做到当JS脚本出了问题，此处还是可以正常的提交，只是没有异步的效果而已了。他们是一个无亲热的脚本。做到了彻底的分离。如果是第一种，也就是get的那个，如果下面的id出现的问题，也就执行不了了，相对而言就有些耦合了。最高级的自然是下面的这两个。

另外再写几个对应的异步选项,

OnFaile ：在发送异步请求失败的时候触发的JavaScript方法,跟OnSuccess相对应。

LoadingElementId ：指定在进行异步请求的时候要显示的提示信息的Loading元素的ID。

InsertionMode InsertionMode ：返回的内容要更新的目标元素的方式。有三种方式：
         Replace ：替换目标元素里面的内容；
         InsertBefore ：返回内容插入到目标元素的前面；
         InsertAfter：返回内容插入到目标元素的后面。

最后附上我写的代码，供诸位参考。就这个样子了，一会还得帮朋友搬家呢。欢迎赐教。

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using System.Web.Mvc;

 namespace _1122MVC_Ajax.Controllers

 {

     public class AjaxController : Controller

     {

         //

         // GET: /Ajax/

         public ActionResult Index()

         {

             return View();

         }

         public ActionResult Date()

         {

             //以下代码就相当于是Response.Write();

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

         }

     }

 }

控制器的代码

 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

 <!DOCTYPE html>

 <html>

 <head runat="server">

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

     <title>Index</title>

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

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

     <script type="text/javascript">

         $(function() {

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

                 $.get("/ajax/date", {}, function(data) {

                     alert(data);

                 });

             });

         });

         function afterSuccess(data) {

             alert(data);

         }

     </script>

 </head>

 <body>

     <div>

         <input type="button" id="btn" value="Get the time1" />

         <hr/>

         <% using (Ajax.BeginForm("date","ajax",new AjaxOptions()

            {

                HttpMethod ="Post",OnSuccess ="afterSuccess",Confirm = "小杜确定想知道现在几点吗"

            }))

            {%>

         <input type="submit" name="name" value="Get the Time2 " />

           <% } %>

         <hr/>

         <form data-ajax-confirm="小杜是不是想念某个城市了" action="/ajax/date" data-ajax="true" data-ajax-method="Post" data-ajax-success="afterSuccess" id="form1" method="post">

         <input type="submit" name="name" value="Get the Time3 " />

           </form>

     </div>

 </body>

 </html>

视图的代码

MVC的Ajax的异步请求的更多相关文章

  1. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  2. 掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  3. ajax 实现异步请求

    ajax实现异步请求: function onclicks() { $.ajax( { url:'../hhh/columnSearch.do',// 跳转到 action // data: {tab ...

  4. AJAX的来龙去脉（由来）-如何被封装出来的--ajax发送异步请求（四步操作）

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  5. ASP.NET MVC 实现 AJAX 跨域请求

    ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送 ...

  6. AJAX发送异步请求教程详解

    AJAX 一.AJAX简介 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可 ...

  7. ASP.NET MVC 实现AJAX跨域请求的两种方法

    通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框 ...

  8. ajax的异步请求小结

    如何判断是使用json还是jsp的数据传输: json字符串可以使用js,jquery,ajax,java这几种技术,页面为jsp页面,json数据为java后台传递来. 1.同步请求可以从因特网请求 ...

  9. JQ+AJAX 发送异步请求

    1. load() ; 作用:通过ajax 请求从服务器加载数据,并添加到符合要求的节点上 用法:$node.load(请求地址,请求参数) 请求参数写法: --"username=admi ...

随机推荐

  1. 【Mongodb】---Scheme和Collections对应问题

    Mongodb通过mongoose来与数据进行操作.而mongoose是通过model来创建数据库中对应的collection mongoose.model('User', UserSchema); ...

  2. Cocoa Touch的3种类的交流方式delegate/target/notification

    1. Delegate 在Cocoa Touch类对象运行的周期中,某一个时间点它会去调用一些指定类的指定函数来完成他自身所要完成的功能.这个”指定的类”,就称为这个类的委托类.”指定函数”则是一些在 ...

  3. MVC4 使用 ckfinder+ckeditor编辑器

    配置ckfinder for asp.net 版本下载地址  http://cksource.com/ckfinder/downloadckeditor下载地址 http://ckeditor.com ...

  4. 微软SQLHelper.cs类 中文版

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Co ...

  5. 移动web开发的一些坑

    类似的题目一搜一大堆,我就不再写那些meta标签类似的内容了,记录一下自己实现中遇到的问题,如果能帮到你,那再好不过了. 1px border的问题,大家能搜到很多方案,但如何选择还是要根据实际情况, ...

  6. ESB数据发布思路

    通过esb已经将数据采集进数据库,现在需要开放一个接口,接受请求参数,进而通过参数进行数据查询,返回一段json格式的数据. ▼流程图: 刚开始尝试了很多个版本,可能是esb开发工具还用不熟练的原因吧 ...

  7. ThinkPHP控制器

    ThinkPHP控制器Controller 1.什么是控制器 在MVC框架中,其核心就是C(Controller)控制器.主要用于接收用户请求,处理业务逻辑. 2.控制器的定义 在一个ThinkPHP ...

  8. windows phone 自定义铃声

    屌丝的电话是一个月都响不了几次的,无聊还是下了一个XX铃声,自娱自乐一下,google了一下实现原理,,,,,,真相啊!!!就是用了一个Task(SaveRingtoneTask),以前看的资料都没有 ...

  9. Lucene使用IKAnalyzer分词实例 及 IKAnalyzer扩展词库

    文章转载自:http://www.cnblogs.com/dennisit/archive/2013/04/07/3005847.html 方案一: 基于配置的词典扩充 项目结构图如下: IK分词器还 ...

  10. 锋利的jquery-选择器

    1 jquery $(document).ready(function(){}) 可以简写成 $(function(){})   2 jquery 对象和DOM对像 ① jquery对象和DOM对象不 ...