2020年3月25日

Ajax serialize()提交form表单不能上传file类型2中方法


前台form表单的提交方式有很多种,例如:
1. form表单submit直接提交的方法
2. Ajax提交的方法
3. jquery提交的方法
4. 原生js提交的方法

每一种方法都有它的优势和不足,有的简单直接,有的写起来复杂,但用起来顺手,最近项目中遇到了一个Ajax 表单提交问题,在这里总结一下ajax提交的两种方式:

1.serialize() 方法:

通过序列化表单值,创建 URL 编码文本字符串。我们可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
所用到的语法为:

$("form").serialize()

这里的$(“form”)操作对象是代表表单元素集合的 jQuery 对象,而不是js对象。

提交方法的代码段:

$('form').submit(function() {
alert($(this).serialize());
return false;
});

最终序列化后,表单中数据会一下面这种方式提交到后台:a=1&b=2&c=3&d=4&e=5
这种方式处理表单时所适用的input标签类型是有限的,只适用于一些常用的类型例如text、checkbox、select、date等等,但是对于file文件类型的input框并不适用,那我们在用到ajax提交方式的时候应该如何提交file类型的input框数据呢?

2.封装FormData 对象,直接用$.ajax提交

论坛上有人提及到FormData的封装方式,将form表单中的内容封装成formdata的数据格式
FormData 对象可以把form中所有表单元素的name与value组成一个queryString,提交到后台,在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。

FormData的使用方法也是非常简单,直接传入form表单对象即可,如下:

var form = $(‘#form1’);
var formdata = new FormData(form);

使用这种方式将数据封装后,file类型的文件数据即可以键值对的方式封装在formdata中,然后用ajx提交,方法如下:

$.ajax({
type : "POST",
url : "houtai/123.do",
data : formData,
async: false,
cache: false,
contentType: false,
processData: false,
success : function(msg) {
if(msg){
alert('提交成功!');
}
}
});

有一点需要注意的是,以formdata的方式提交时需要添加async: false, 同步,否则后台无法接收到前台传过来的file文件数据,这样的提交方式,既可以提交任何一种type类型标签,又可以在提交之后得到返回结果,方便快捷又实用。

关于form表单提交的方式还有很多很多,本文只是关于ajax的两种提交方式总结,希望以后还可以遇到更好用的提交方式或者提交插件。

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732