ajaxForm和ajaxSubmit都支持Options對象參數 form表單代碼 提交時使用下麵三處代碼任意一處皆可，提交後臺數據和form普通提交後一樣，該怎樣處理就怎樣處理 #1、ajaxForm 提交 #2、ajaxSubmit 提交 #3、options 參數提交 ...
jQuery官網是這樣介紹form.js A simple way to AJAX-ify any form on your page; with file upload and progress support.
簡單來說就是用ajax提交form表單（含file內容）內容
form.js提供的API方法
| API | API描述 | 參數 |
| ajaxForm | 增加所有需要的事件監聽器，為ajax提交表單做準備。ajaxForm並不能提交表單。在document的ready函數中，使用ajaxForm來為ajax提交表單進行準備。 | 接受0個或1個參數。參數可以是一個回調函數，也可以是一個Options對象。 |
| ajaxSubmit | 使用ajax提交表單。 | 接受0個或1個參數。參數可以是一個回調函數，也可以是一個Options對象。 |
| formSerialize | 將表單串列化（或序列化）為一個查詢字元串。這個方法將返回以下格式的字元串：name1=value1&name2=value2。 | 無 |
| fieldSerialize | 將表單的欄位元素串列化（或序列化）為一個查詢字元串。當只有部分表單欄位需要進行串列化（或序列化）時，使用這個就很方便了。返回以下格式的字元串：name=value1&name2=value2。 | 無 |
| fieldValue | 返回匹配插入數組中的表單元素值。該方法以數組的形式返回數據。如果元素值被判定可能無效，則數組為空。 | 無 |
| resetForm | 將表單恢復到初始狀態。 | 無 |
| clearForm | 清除表單元素。該方法將所有的text、password、textarea置空，清除select元素中的選定，以及所有radio按鈕和checkbox按鈕重置為非選定狀態。 | 無 |
| clearFields | 清除欄位元素。只有部分表單元素需要清除時方便使用。 | 無 |
ajaxForm和ajaxSubmit都支持Options對象參數
| target | 指明頁面中由伺服器響應進行更新的元素。元素的值可能被指定為一個jQuery選擇器字元串、一個jquery對象、一個DOM元素。 | 預設值：null |
| url | 指定提交表單數據的URL。 | 預設值：表單的action屬性值 |
| type | 指定提交表單數據的方法（method）：“GET”或“POST”。 | 預設值：GET |
| beforeSubmit | 表單提交前被調用的回調函數。如果回調函數返回false表單將不被提交。回調函數帶三個調用參數：數組形式的表單數據，jQuery表單對象，以及傳入ajaxForm/ajaxSubmit中的Options對象。 | 預設值：null |
| success | 表單成功提交後調用的回調函數。然後dataType選項值決定傳回responseText還是responseXML的值。 | 預設值：null |
| dataType | 返回的數據類型：null、"xml"、"script"、"json"其中之一。 | 預設值：null |
| resetForm | 表示如果表單提交成功是否進行重置。 | 預設值：null |
| clearForm | 表示如果表單提交成功是否清除表單數據。 | 預設值：null |
| timeout | 限制請求的時間，當請求時間大於設置時間後，跳出請求 |
form表單代碼
<form id="form-js-demo" action="test.php" method="post">
<p>Name: <input type="text" name="name" value="name"/></p>
<p>password: <input type="text" name="password" value="password"/></p>
<p>
<input type="checkbox" name="letter" value="A">A
<input type="checkbox" name="letter" value="B">B
<input type="checkbox" name="letter" value="C">C
</p>
<p>
<input type="radio" name="size" value="S">S
<input type="radio" name="size" value="M">M
<input type="radio" name="size" value="L">L
</p>
<p>File: <input type="file" name="file"/></p>
<p>Comment: <textarea name="comment">comment</textarea></p>
<p>
<button type="submit" id="submit">Submit</button>
<button type="button" id="serialize">serialize</button>
<button type="submit" id="options">Options Submit</button>
</p>
</form>
<div class="data-show"></div>
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.form.js"></script>
提交時使用下麵三處代碼任意一處皆可，提交後臺數據和form普通提交後一樣，該怎樣處理就怎樣處理
#1、ajaxForm 提交
$('#form-js-demo').ajaxForm(function (obj) {
console.log(obj);//obj 後臺處理數據的返回值
});
#2、ajaxSubmit 提交
$('#form-js-demo').submit(function () {
$('#form-js-demo').ajaxSubmit(function (obj) {
//obj 後臺處理數據的返回值
console.log(obj);
});
return false;//若不return false，會跳轉提交（重覆提交）。
});
#3、options 參數提交
$('#options').click(function () {
var options = {
url: 'test2.php', //form提交路由，form表單和options都可設置,兩處都設置了則以form中設置為準
type: 'get', //form提交方式，form表單和options都可設置,兩處都設置了則以form中設置為準(method:post/get)
target: '.div-display', //伺服器返回的數據顯示在元素(id或class)中顯示(後臺返回數據原樣顯示在.div-display中)
beforeSubmit: function (obj) {
//obj form提交數據，以對像存儲
console.log(obj);
//return false;//設置false 則不會提交
}, //提交前回調函數
success: function (obj) {
//obj 後臺返回數據 若options設置了 target 項 obj 返回 0
console.log(obj);
}, //提交成功後回調函數
dataType: null, //伺服器返回數據類型
clearForm: true, //提交成功後是否清空表單中的欄位值
restForm: true, //提交成功後是否重置表單中的欄位值，即恢復到頁面載入時的狀態
timeout: 6000 //設置請求時間，超過該時間後，自動退出請求，單位(毫秒)。
};
$('#form-js-demo').ajaxForm(options);
form.js 表單序列化方法測試和對比
$("#serialize").click(function () {
//jquery 自帶表單序列化方法 會忽略 input[type="file"] 內容
console.log($('#form-js-demo').serialize());
//name=name&password=password&letter=B&letter=C&size=M&comment=comment
//form.js 表單序列化方法 包含 input[type="file"] 內容
console.log($('#form-js-demo').formSerialize());
//name=name&password=password&letter=B&letter=C&size=M&file=&comment=comment
//form.js 表單序列化方法 只序列input[type="text"]內容
console.log($('#form-js-demo input[type="text"]').fieldSerialize());
//name=name&password=password
});
