使用jQuery，实现完美的表单异步提交

jQuery异步提交表单

 1 <form id="form1" method="post">
 2     <table border="1">
 3         <tr>
 4             <td>用户名：</td>
 5             <td>
 6                 <input type="text" name="loginName" /></td>
 7         </tr>
 8         <tr>
 9             <td>爱  好：</td>
10             <td>
11                 <input type="checkbox" name="cbLoveYy" value="1" />游泳
12                 <input type="checkbox" name="cbLoveYx" value="1" />游戏
13                 <input type="checkbox" name="cbLovePs" value="1" />爬山
14             </td>
15         </tr>
16         <tr>
17             <td colspan="2" style="text-align: center">
18                 <input id="btnAjaxSubmit" type="submit" value="jQuery.ajax提交" />
19             </td>
20         </tr>
21     </table>
22 </form>

 1 <script type="text/javascript">
 2     $(document).ready(function () {
 3         $("#btnAjaxSubmit").click(function () {
 4             var options = {
 5                 url: 'async_submit_test1.aspx?action=SaveUserInfo',
 6                 type: 'post',
 7                 dataType: 'text',
 8                 data: $("#form1").serialize(),
 9                 success: function (data) {
10                     if (data.length > 0)
11                         $("#responseText").text(data);
12                 }
13             };
14             $.ajax(options);
15             return false;
16         });
17     });
18 </script>

我们通过$("#form1").serialize()将表单元素的数据转化为字符串，然后通过$.ajax()执行异步请求资源。

方案：jQuery.ajax() + .aspx请求

此方案优势：

1) 我们不会感觉页面的“闪一闪”效果

2) 我们不会因为服务器耗时响应而导致出现“百页”的糟糕用户体验。

此方案劣势：

1) 此方案中我还是使用了aspx页面去响应请求，只是在后台通过action参数去做相应处理，尽管是异步操作但却完完整整的跑了一遍ASP.NET页面生命周期（这也是在Response.Write()输出完自己的东西后必须调用Response.End();来提前终止生命周期，否则页面信息也会一起返回）

2) jQuery库提供的序列化表单字符串方法不能收集文件上传的表单元素，如，$("#form1").serialize()。所以对于包含文件上传的表单我们还需通过<iframe>模拟异步表单提交。（<iframe>模拟异步表单提交的过程我将在分析jQuery.form插件的源码小节进行说明）

（jQuery库提供的序列化字符串的数据来源时表单的elements属性，而<input type=”file” />的表单元素不包含在elements中）

当然jQuery.ajax()也可以结合.ashx文件(一般处理文件)或其他方式实现高效异步请求，这边只是为了说明：异步请求aspx页面也会跑一边aspx页面生命周期的事实。

jQuery.form插件轻松实现表单提交

现在我们使用jQuery的表单插件Jquery.form.js（官网）来实现异步表单提交。

1) 该插件需要Jquery最低版本为v1.5

2) 该插件提供了ajaxSubmit和ajaxForm两种表单提交方式，但不要对同一个表单同时使用两种方式。

现在我将通过“jQuery+jQuery.form插件+ashx(一般处理文件)”来实现一个高效的异步表单提交。

 1 <form id="form1" action="ajaxOperation.ashx" method="post">
 2     <table border="1">
 3         <caption>jQuery.form.js异步提交方式</caption>
 4         <tr>
 5             <td>用户名：</td>
 6             <td>
 7                 <input type="text" name="loginName" /></td>
 8         </tr>
 9         <tr>
10             <td colspan="2" style="text-align: center">
11                 <button id="btnAjaxSubmit">ajaxSubmit提交</button>
12                 &nbsp;
13                 <input id="btnAjaxForm" type="submit" value="ajaxForm提交" />
14             </td>
15         </tr>
16     </table>
17 </form>

1) 为<form>标签指定action值，指定使用ajaxOperation.ashx处理该表单请求。

2) 使用两个提交按钮btnAjaxSubmit和btnAjaxForm分别对应jQuery.form插件提供的两种表单提交API。

jQuery表单插件提交代码如下：

 1 <script type="text/javascript">
 2     $(document).ready(function () {
 3     var options = {
 4         success: function (data) {
 5             $("#responseText").text(data);
 6         }
 7     };
 8  
 9         // ajaxForm
10         $("#form1").ajaxForm(options);
11  
12         // ajaxSubmit
13         $("#btnAjaxSubmit").click(function () {
14             $("#form1").ajaxSubmit(options);
15         });
16     });
17 </script>

方案：jQuery.form.js插件 + .ashx请求

此方案优势：

1) 简简单单几句代码，我们就可以实现表单的提交，并且可灵活通过ajaxSubmit()函数基于任何事件的触发实现表单异步提交。

2) 支持文件上传功能，并在新浏览器中支持进度条更新。（在jQuery.form插件源码分析中会进行说明）

3) 与jQuery库完美结合，支持jQuery.ajax()函数触发的各种事件，支持jQuery.ajax()中所传递的参数。（在jQuery.form插件源码分析中会进行说明）

好了，这样短而易读的代码，这样的偷懒方式不正是我们追求的吗？那jQuery.form插件提供的表单提交API是否高效呢？内部又做了些什么？接下来跟着我看看jQuery.form插件内部实现吧。。。