1.??????背景
最近在工作中,需要實現網頁端圖片上傳到FTP服務器的功能。上傳文件是用Form表單提交數據的方法向后臺傳輸文件流,在此遇到了一個問題:后臺在處理完圖片上傳功能后,需要向前臺回傳是否上傳成功的狀態碼、上傳失敗的錯誤信息和上傳成功后的圖片URL。但是,用普通Form表單提交的話,沒有辦法實現回調函數。后來在小伙伴的介紹下,發現可以用ajaxSubmit()方法來實現此功能。
javascript提交表單、2.??????ajaxSubmit()方法簡介
(1)ajaxSubmit()依賴
ajaxSubmit()方法是jQuery Form表單插件中的方法,要想使用該插件,可以直接去官網http://jquery.malsup.com/form/下載。使用時,需要在jsp或者html頁面上,引入JQuery庫和Form插件。
ajax提交文件、(2)ajaxSubmit()用法簡介
ajaxSubmit()方法接受0個或者1個參數,當為單個參數時,該參數既可以是一個回調函數,也可以是一個options對象。回調函數比較簡單,下面主要介紹一下options的用法。options對象可以設置的參數如下:
- 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秒后,跳出請求??
- };??
ajax提交數據、
這些參數里,比較常用的就是提交前的回調函數beforeSubmit和提交后的回調函數success。beforeSubmit主要是用來提交表單前,校驗數據的。示例代碼:
- function?validate(formData,?jqForm,?options)?{??
- ????????/*?
- ????????在這里需要對表單元素進行驗證,如果不符合規則,?
- ????????直接返回false來阻止表單提交。?
- ????????*/??
- ????????var?queryString?=?$.param(formData);????????//組裝數據??
- ????????return?true;??
- }??
jsp表單提交??
這個回調函數有三個參數,formData是數組對象,jqForm是一個JQuery對象,它封裝了表單的元素,options參數就是options對象。在這個回調函數中,只要不返回false,表單都將被允許提交;如果返回false,則會阻止表單提交。
success是提交后的回調函數,有4個參數responseText,statusText,xhr,和$form。其中,比較常用的是前兩個。statusText只是一個返回狀態,例如success,error等。responseText攜帶著服務器返回的數據內容,它會根據設置的options對象中的dataType屬性來返回相應格式的內容。
表單ajax提交。3.??????ajaxSubmit()方法代碼示例
下面是ajaxSubmit()方法使用的一個模板。
?
- $(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);??
- ????}?????
- }?