1. 背景
   最近在工作中，需要實現網頁端圖片上傳到FTP服務器的功能。上傳文件是用Form表單提交數據的方法向後臺傳輸文件流，在此遇到了一個問題：後臺在處理完圖片上傳功能後，需要向前臺回傳是否上傳成功的狀態碼、上傳失敗的錯誤信息和上傳成功後的圖片URL。但是，用普通Form表單提交的話，沒有辦法實現回調函數。後來在小夥伴的介紹下，發現可以用ajaxSubmit()方法來實現此功能。
2. ajaxSubmit()方法簡介
   （1）ajaxSubmit()依賴
   ajaxSubmit()方法是JQuery Form表單插件中的方法，要想使用該插件，可以直接去官網http://jquery.malsup.com/form/下載。使用時，需要在jsp或者html頁面上，引入JQuery庫和Form插件。
   
   （2）ajaxSubmit()用法簡介
   ajaxSubmit()方法接受0個或者1個參數，當為單個參數時，該參數既可以是一個回調函數，也可以是一個options對象。回調函數比較簡單，下面主要介紹一下options的用法。options對象可以設置的參數如下：
   ?
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   var options = {
   target: ‘#output1‘, //把服務器返回的內容放入id為output1的元素中
   beforeSubmit: showRequest, //提交前的回調函數
   success: showResponse, //提交後的回調函數
   url: url, //默認是form的action，如果聲明，則會覆蓋
   
   type: type, //默認是form的method，如果聲明，則會覆蓋
   dataType: json , //接受服務端返回的類型
   clearForm: true, //成功提交後，清除所有表單元素的值
   resetForm: true, //成功提交後，重置所有表單元素的值
   timeout: 3000 //限制請求的時間，當請求大於3秒後，跳出請求
   }；
   這些參數裏，比較常用的就是提交前的回調函數beforeSubmit和提交後的回調函數success。beforeSubmit主要是用來提交表單前，校驗數據的。示例代碼：
   ?
   1
   2
   3
   4
   5
   6
   7
   8
   function validate(formData, jqForm, options) {
   
   /
   在這裏需要對表單元素進行驗證，如果不符合規則，
   直接返回false來阻止表單提交。
   /
   var queryString = $.param(formData); //組裝數據
   return true;
   }
   這個回調函數有三個參數，formData是數組對象，jqForm是一個JQuery對象，它封裝了表單的元素，options參數就是options對象。在這個回調函數中，只要不返回false，表單都將被允許提交；如果返回false，則會阻止表單提交。
   success是提交後的回調函數，有4個參數responseText，statusText，xhr，和$form。其中，比較常用的是前兩個。statusText只是一個返回狀態，例如success，error等。responseText攜帶著服務器返回的數據內容，它會根據設置的options對象中的dataType屬性來返回相應格式的內容。
3. ajaxSubmit()方法代碼示例
   下面是ajaxSubmit()方法使用的一個模板。
   ?
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   $(function(){
   var options = {
   type: ‘POST‘,
   url: ‘提交路徑‘,
   success:showResponse,
   dataType: ‘json‘,
   error : function(xhr, status, err) {
   alert("操作失敗");
   }
   };
   $("##Form名稱").submit(function(){
   $(this).ajaxSubmit(options);
   return false; //防止表單自動提交
   });
   });
   /**
   • 保存操作
     */
     function toSave(){
     $("#Form名稱").submit();
     }
     /**
   • 保存後，執行回調
   • @param responseText
   • @param statusText
   • @param xhr
   • @param $form
     */
     function showResponse(responseText, statusText, xhr, $form){
     if(responseText.status == "0"){
     /**
   • 請求成功後的操作
     */
     alert(responseText.msg);
     } else {
     alert(responseText.msg);
     }
     }

利用AjaxSubmit()方法實現時時采平臺出租Form提交表單後回調功能