ajaxForm的应用

2016/03/02 09:06
阅读数 11

 

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



展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部