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. }  

63. 
    

转载于:https://my.oschina.net/u/2607496/blog/626904