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的异步请求

最新文章

热门文章