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.前端代码：

<span style="font-size:14px;"><form id="fm_importSales" method="post" enctype="multipart/form-data">
                <table  class="fm-table fm-table-td">
                    <tr>
                        <th>选择文件：</th>
                        <td>
                            <!-- accept属性限定xlsx格式文件，但是该属性只在FF和chrome生效，IE10以下不生效 -->
                            <input id="excelfile" name="filename" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="COLOR: RED;font-size: 15px;">
                        </td>
                    </tr>
                    <tr>
                        <td>
                        <input style="width: 100px;" value="导入Excel" type="submit"/>
                        <input style="width: 100px;" value="取消" type="button" οnclick="javascript:$('#dlg_importSales').dialog('close')"/>
                        </td>
                    </tr>
                    <input type="hidden" id="importOrgId" name="orgId">
                    <input type="hidden" id="importChlInfoId" name="channelInfoId">
                </table>
            </form></span>

前端定义了一个form，form中包含一个table。form包含一个submit按钮。

2.js代码

（1）在document.ready()中注册form组件。

<span style="font-size:14px;">$(document).ready(function() {  
	// bind 'myForm' and provide a simple callback function   
	var options = {
			url: baseContextPath+'/channelOrganization/importSales',
			//定义返回JSON数据，还包括xml和script格式
		    dataType:'json',
		    beforeSerialize: doBeforeSerialize,
		    beforeSubmit: doBeforeSubmit,
		    //beforeSend: handelImport,
		    success: handelResonse
	}
	$('#fm_importSales').ajaxForm(options);
	
	$('#fm_importSales').submit(function() {
		// 提交表单
		$(this).ajaxSubmit();
		// return false to prevent normal browser submit and page navigation
		return false;
	});
});
</span>

（2）写表单提交三个阶段的函数：

function handelResonse(result){
	//提交成功后调用
   if (result.success){
	   $('#dlg_importSales').dialog('close');
	   $.messager.show({
			title : '提示',
			msg : result.msg,
			show : 'show',		// fade是渐隐，另外两种是“show”和“slide”
			timeout : 3000 			// 持续时间
		});
   } else {
	   $.messager.show({
			title : '错误提示',
			msg : result.msg,
			show : 'show',		// fade是渐隐，另外两种是“show”和“slide”
			timeout : 3000 			// 持续时间
		});
   }
   // 判断是否要导出txt
   if (result.exportTxt) {
	   getTxt();
   }
}

function getTxt(){
	var url_getTxt = baseContextPath+'/channelOrganization/importSales';
	//window.open(url_getTxt);   //会打开新选项卡，可能被浏览器拦截，弃用
	window.location.href = url_getTxt;
}
function doBeforeSerialize(){
	//alert('doBeforeSerialize');
	// return false to cancel submit
	
	var excelfile = $('#excelfile').val();
	if("" == excelfile || null == excelfile) {
		alert('请选择文件。');
		return false;
	}
	
	var p = excelfile.endWith(".xlsx");
	if (!excelfile.endWith(".xlsx")) {
		alert('文件格式不对！请选择.xlsx格式的文件。');
		return false;
	}
	
	var node = $('#channelOrganization').tree('getSelected');
	if (null == node) {
		alert('请先选中要添加销售点的组织结构。');
		return false;
	}
	var channelId = $("#channelList").combobox('getValue');
	$('#importOrgId').val(node.id);
	$('#importChlInfoId').val(channelId);
	return true;
}
function doBeforeSubmit(){
	//alert("doBeforeSubmit");
}

function handelImport() {
	//alert('handelImport');
}

一下三个函数会按顺序执行：

beforeSerialize

beforeSubmit

beforeSend