ajaxForm的應用

 

ajaxForm的應用

背景：

在From中須要上傳文件，而且可以在From提交成功後處理返回的值。就須要使用ajaxForm的方式來提交。

使用html中form的提交方式，不管是使用頁面的submit按鈕仍是使用jquery的$('#myform').submit()方式，來提交form，都無法處理提交後返回來的數據。

要使用回調函數處理返回來的數據，就要使用ajax來提交form。

可是ajax提交from的時候無法傳送文件。

因此使用ajaxForm就能夠完美解決這個問題：既能夠上傳文件到後臺，也能夠寫回調函數來處理返回來的數據。

使用ajaxForm須要引入文件：jquery.form.js

官網 http://jquery.malsup.com/form/ ，實際上是個基於jquery的From plugin，須要jquery1.5 or later。

詳細的用法能夠參見官網上的說明。

下面講一個我使用的方式，看成例子：

1.前端代碼：

[html] view plain copy print?

1. <span style="font-size:14px;"><form id="fm_importSales" method="post" enctype="multipart/form-data">  

2.                 <table  class="fm-table fm-table-td">  

3.                     <tr>  

4.                         <th>選擇文件：</th>  

5.                         <td>  

6.                             <!-- accept屬性限定xlsx格式文件，可是該屬性只在FF和chrome生效，IE10如下不生效 -->  

7.                             <input id="excelfile" name="filename" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="COLOR: RED;font-size: 15px;">  

8.                         </td>  

9.                     </tr>  

10.                     <tr>  

11.                         <td>  

12.                         <input style="width: 100px;" value="導入Excel" type="submit"/>  

13.                         <input style="width: 100px;" value="取消" type="button" onclick="javascript:$('#dlg_importSales').dialog('close')"/>  

14.                         </td>  

15.                     </tr>  

16.                     <input type="hidden" id="importOrgId" name="orgId">  

17.                     <input type="hidden" id="importChlInfoId" name="channelInfoId">  

18.                 </table>  

19.             </form></span>  

前端定義了一個form，form中包含一個table。form包含一個submit按鈕。

2.js代碼

（1）在document.ready()中註冊form組件。

[javascript] view plain copy print?

1. <span style="font-size:14px;">$(document).ready(function() {    

2.     // bind 'myForm' and provide a simple callback function     

3.     var options = {  

4.             url: baseContextPath+'/channelOrganization/importSales',  

5.             //定義返回JSON數據，還包括xml和script格式  

6.             dataType:'json',  

7.             beforeSerialize: doBeforeSerialize,  

8.             beforeSubmit: doBeforeSubmit,  

9.             //beforeSend: handelImport,  

10.             success: handelResonse  

11.     }  

12.     $('#fm_importSales').ajaxForm(options);  

13.       

14.     $('#fm_importSales').submit(function() {  

15.         // 提交表單  

16.         $(this).ajaxSubmit();  

17.         // return false to prevent normal browser submit and page navigation  

18.         return false;  

19.     });  

20. });  

21. </span>  

（2）寫表單提交三個階段的函數：

[javascript] view plain copy print?

1. function handelResonse(result){  

2.     //提交成功後調用  

3.    if (result.success){  

4.        $('#dlg_importSales').dialog('close');  

5.        $.messager.show({  

6.             title : '提示',  

7.             msg : result.msg,  

8.             show : 'show',      // fade是漸隱，另外兩種是「show」和「slide」  

9.             timeout : 3000          // 持續時間  

10.         });  

11.    } else {  

12.        $.messager.show({  

13.             title : '錯誤提示',  

14.             msg : result.msg,  

15.             show : 'show',      // fade是漸隱，另外兩種是「show」和「slide」  

16.             timeout : 3000          // 持續時間  

17.         });  

18.    }  

19.    // 判斷是否要導出txt  

20.    if (result.exportTxt) {  

21.        getTxt();  

22.    }  

23. }  

24.   

25. function getTxt(){  

26.     var url_getTxt = baseContextPath+'/channelOrganization/importSales';  

27.     //window.open(url_getTxt);   //會打開新選項卡，可能被瀏覽器攔截，棄用  

28.     window.location.href = url_getTxt;  

29. }  

30. function doBeforeSerialize(){  

31.     //alert('doBeforeSerialize');  

32.     // return false to cancel submit  

33.       

34.     var excelfile = $('#excelfile').val();  

35.     if("" == excelfile || null == excelfile) {  

36.         alert('請選擇文件。');  

37.         return false;  

38.     }  

39.       

40.     var p = excelfile.endWith(".xlsx");  

41.     if (!excelfile.endWith(".xlsx")) {  

42.         alert('文件格式不對！請選擇.xlsx格式的文件。');  

43.         return false;  

44.     }  

45.       

46.     var node = $('#channelOrganization').tree('getSelected');  

47.     if (null == node) {  

48.         alert('請先選中要添加銷售點的組織結構。');  

49.         return false;  

50.     }  

51.     var channelId = $("#channelList").combobox('getValue');  

52.     $('#importOrgId').val(node.id);  

53.     $('#importChlInfoId').val(channelId);  

54.     return true;  

55. }  

56. function doBeforeSubmit(){  

57.     //alert("doBeforeSubmit");  

58. }  

59.   

60. function handelImport() {  

61.     //alert('handelImport');  

62. }