MVC的Ajax的异步请求
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：返回内容插入到目标元素的后面。
最后附上我写的代码，供诸位参考。就这个样子了，一会还得帮朋友搬家呢。欢迎赐教。
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6 7 namespace _1122MVC_Ajax.Controllers 8 { 9 public class AjaxController : Controller 10 { 11 // 12 // GET: /Ajax/ 13 14 public ActionResult Index() 15 { 16 return View(); 17 } 18 19 public ActionResult Date() 20 { 21 //以下代码就相当于是Response.Write(); 22 return Content(DateTime.Now.ToString()); 23 } 24 } 25 }
1 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 2 3 <!DOCTYPE html> 4 5 <html> 6 <head runat="server"> 7 <meta name="viewport" content="width=device-width" /> 8 <title>Index</title> 9 <script src="../../Scripts/jquery-1.8.2.js"></script> 10 <script src="../../Scripts/jquery.unobtrusive-ajax.js"></script> 11 <script type="text/javascript"> 12 $(function() { 13 $('#btn').click(function() { 14 $.get("/ajax/date", {}, function(data) { 15 alert(data); 16 }); 17 }); 18 }); 19 function afterSuccess(data) { 20 alert(data); 21 } 22 </script> 23 </head> 24 <body> 25 <div> 26 <input type="button" id="btn" value="Get the time1" /> 27 <hr/> 28 <% using (Ajax.BeginForm("date","ajax",new AjaxOptions() 29 { 30 HttpMethod ="Post",OnSuccess ="afterSuccess",Confirm = "小杜确定想知道现在几点吗" 31 })) 32 {%> 33 <input type="submit" name="name" value="Get the Time2 " /> 34 <% } %> 35 <hr/> 36 <form data-ajax-confirm="小杜是不是想念某个城市了" action="/ajax/date" data-ajax="true" data-ajax-method="Post" data-ajax-success="afterSuccess" id="form1" method="post"> 37 <input type="submit" name="name" value="Get the Time3 " /> 38 </form> 39 </div> 40 </body> 41 </html>
