【整理】01. jQuery.Form.js 用法分析

前言：

1. 为什么使用JQuery.From.js，因为原生<form>表单没有回调函数，不过可以通过jquery-form.js这个插件来实现回调函数。
2. jQuery.form.js是一个form 插件，支持 ajax表单提交 和 ajax文件上传。

方法：

1. formSerilize()  用于序列化表单中的数据，并将其自动整理成适合AJAX异步请求的URL地址格式。
2. clearForm()     清除表单中所有输入值的内容。
3. restForm        重置表单中所有的字段内容。即，将所有表单中的字段恢复到页面加载时的默认值。
4. 两个主要的 API：ajaxForm()，ajaxSubmit()。

疑问：

1. ajaxForm() 与 ajaxSubmit() 的区别：
1. $("#form1").ajaxForm();  相当于以下两行：

   1 2 3 4

   $("#form1".submit)(function(){      $("#form1").ajaxSubmit();      return false; })

   也就是说 ajaxFrom()会自动阻止表单提交。而 ajaxSubmit()不会自动阻止表单提交，想阻止表单提交，要自己 return false;

技巧：

1. 如果希望表单提交完成后不跳转，那么一行简单的代码就能够实现，几乎与不使用表单提交是一样的:

   1 2 3

   $("#MailForm").ajaxSubmit(function(message) {       alert("表单提交已成功!"); });

1. 注意:ajaxForm()与 ajaxSubmit() 都可以没有参数或者接受1个参数。该参数既可以是一个回调函数，也可以是一个options对象。该对象功能非常强大，说明如下:

   1 2 3 4 5 6 7 8 9 10 11

   var options={    url:url,         //form 提交数据的地址    type:type,       //form 提交的方式(method:post/get)    target:target,   //服务器返回的响应数据显示在元素(Id)号确定    beforeSubmit:function(), //提交前执行的回调函数    success:function(),      //提交成功后执行的回调函数    dataType:null,   //服务器返回数据类型    clearForm:true,  //提交成功后是否清空表单中的字段值    restForm:true,   //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态    timeout:6000     //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。 }

2. 或者，使用 iframe 来防止提交表单时防止页面跳转；

demo：点击按钮，弹出文件上传选择框，选择文件确定后，发送上传请求。

1. html

   1 2 3 4 5

   </div> <a id="vip_batch_export_btn" class="easyui-linkbutton" style="width: 70px">导入</a>  <form id="upForm" enctype="multipart/form-data" target="uploadIframe" style="position: absolute;left: -9999px;">     <input id="upfile" type="file" name="uploadExcel"/> </form>  <iframe id="uploadIframe" src="about:blank" style="display: none;"></iframe>

2. Javascript
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   VipCar.importVipList = function(){     var options  = {              url:"../vipManager/importVipInfo.do",          type:'post',          success:function(data){              // ...           },          error: function(xhr,status,msg){             // ...          }     };         $("#upForm").ajaxSubmit(options);       // 重新添加一下,否则再次上传同名文件可能就不会触发onchange事件.     var input = '<input id="upfile" type="file" name="uploadExcel" onchange="VipCar.importVipList();"/>';     $("#upfile").remove();     $('#upForm').append(input); };

注意问题：

1. 引入js文件，建议 jquery-form.js，紧随 jquery文件之后，之前我中间穿插引入了easyui 导致 ajaxSubmit() 不可用。