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. php中一串数子的转化

    echo "<meta charset=utf-8>"; echo "笔试题测试"; $str = "123456780"; $ ...

  2. 使用secureCRT连接VMware-Ubuntukylin虚拟机

    使用SecureCRT连接VMware时总是提醒主机拒绝连接.这时可以使用sudo apt-get install openssh-server openssh-client,在主机上安装ssh. 安 ...

  3. Part 7 Joins in sql server

    Joins in sql server Advanced or intelligent joins in sql server Self join in sql server Different wa ...

  4. CAS Ticket SSO 登录流程图

  5. HTML的FORM的元素

    form是是HTML的一个重要元素. form的常用控件有 单行文本框<input type="text" value="text" name=" ...

  6. js 获取url 参数

    $(function () { var WeixinCode = GetQueryString("WeixinCode"); $("#ProXQ").attr( ...

  7. SDWebImage缓存清理

    //计算缓存大小 [SDImageCache sharedImageCache] getSize] //清理缓存 SDImageCache *sd = [[SDImageCache alloc]ini ...

  8. (转)集成架构：对比 Web API 与面向服务的架构和企业应用程序集成

    摘要:总体上讲,SOA 和 Web API 似乎解决的是同一个问题:以实时的.可重用的方式公开业务功能.本教程将分析这些举措有何不同,以及如何将它们融入到一个不断演变的集成架构中.文中还将讨论 API ...

  9. NodeJs多进程和socket.io通讯-DEMO

    一.开启多进程 const os = require('os'); const cp = require('child_process'); const forkList = {}; const fo ...

  10. jquery页面滚动，菜单固定到顶部

    // 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...