ajax提交带文件的表单

在做项目的时候遇到一个问题,在导入excel的时候导入出现的错误信息如何处理的问题。首先,交代一下前提:该导入功能没有使用事务控制,即不是成功或者不成功二选一。而是只要数据符合要求就导入,错误数据不导入提示用户修改

逻辑上说,只要导入出现了导入不成功的数据,就需要打回到导入页面。即回到用户的操作原点,并将错误信息呈现给用户。所有数据都导入成功时才转到list页面,并提示成功。

问题描述

那么问题是当以一般的形式提交表单时,经过处理后的信息输出到了一个空白的只有错误信息的页面。即覆盖掉了用户的操作原点。并且界面风格也是很不匹配。

解决思路

为了能让出现错误信息呈现在导入数据页面,所以想到了使用ajax。ajax可以不刷新页面,那么我就能把错误信息打回到导入数据页面

实现

利用jquery的ajax提交表单,代码如下:

function submitForm() {
		var options={
			  type:"post",url:"${ctx}baseinfo/userinfo!importData.action",async: false,enctype:"multipart/form-data",iframe:true,dataType:"Text",error:function(data){
                    alert(data);
		          },success:function(msg){
	        	var arrs = msg.split("|");
				switch(parseInt(arrs[0])){
				case 1:
					document.getElementById("resultMsg").innerHTML=arrs[1];
					break;
				case 2:
					document.location.href = "${ctx}" + arrs[1];
					break;
				default:
					alert("未知错误请联系管理员!");	
				}                  
              }
        };
		var upload = $('#upload').val();
		if (upload.length == 0) {
			alert("上传文件不能为空!");
			return false;
		} else {
			return $('#frmServices').ajaxForm(options);
		}
	}


需要引入jquery的js文件jquery-1.10.2.min.js、jquery.form.js、jquery.MultiFile.js其中min.js需要1.5版本

小结:jquery的ajax中可用$('#yourformid').serialize()将表单中的数据都转化成:key1=value1&key2=value2但是这种方式无法提交带上传文件的数据。以上这种方式才可以将文件提交过去以后才支持

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 😃 https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: "./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...