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. js获取iframe的parent对象

    使用谷歌浏览器调试代码时无意间发现了一个奇特的问题:从iframe页面调用父级页面的方法,window.parent.text(),出现 Blocked a frame with origin &qu ...

  2. jQuery中的选择器<思维导图>

    选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...

  3. sql调用方法精简

    <%If IsArray(proList) Then%> <UL class="product-ul"> <%For x=0 to Ubound(pr ...

  4. XML DOM 循环（foreach）读取PHP数据 和 PHP 编写 XML DOM 【转载】

    用 PHP 读取和编写可扩展标记语言(XML)看起来可能有点恐怖.实际上,XML 和它的所有相关技术可能是恐怖的,但是用 PHP 读取和编写 XML 不一定是项恐怖的任务.首先,需要学习一点关于 XM ...

  5. 如何用ASP.NET实现bosh模拟http双向长连接请求

    在做研究之前先简单说一下之前公司的通讯模块.最早的时候公司开发的web管理系统是需要配合c++桌面客户端进行一些系统底层操作,并非普通的b/s架构,或者c/s架构,因为需求是可以通过web管理系统向客 ...

  6. Java实现邮箱找回密码 --转载

    通过邮件找回密码功能的实现 1.最近开发一个系统,有个需求就是,忘记密码后通过邮箱找回.现在的系统在注册的时候都会强制输入邮箱,其一目的就是 通过邮件绑定找回,可以进行密码找回.通过java发送邮件的 ...

  7. AMQ学习笔记 - 11. Spring-JmsTemplate之执行

    概述 前面我们分别介绍了发送.接收和浏览,这三个的实现都依赖于将要介绍的执行. 执行算是一个相对比较底层的方法系列,一般情况下,我们不需要直接面向将要介绍的方法. 执行 1.关于回调接口 在讲执行之前 ...

  8. eclipse安装tomcate插件步骤

    今天在网上看了很多关于eclipse需要安装tomcat的文章,小编也没有指责的意思,只是想说为什么有那么多雷同且不正确的搭建过程,真是ctrl+c, ctrl+v玩多了吧,不知道流程有的是错误的,不 ...

  9. js实现移动端无限加载分页

    原理:当滚动条到达底部时,执行下一页内容. 判断条件需要理解三个概念:    1.scrollHeight 真实内容的高度    2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的 ...

  10. hibernate 一对多映射关系

    1.   单项多对一映射       custom(顾客)与order(订单) :一个顾客可以有多个订单,一个订单只能有一个顾客       配置方法:在多的一端配置<many -to one& ...