AJAX序列化之serialize()和new FormData()的区别

一、FormData和serialize的区别

1、共同点： 都需要设置表单各项的name属性。 都能快速收集表单数据 都能够获取到隐藏域（<input type="hidden" />）的值 都不能获取禁用状态（disabled）的值

2、不同点： FormData属于原生的代码；serialiaze是jQuery封装的方法 FormData可以收集文件域（<input type="file"/>）的值，而serialize不能。如果有文件上传，则必须使用FormData， 得到的结果的数据类型不一样。

二、 serialize() 函数

jQuery 的 serialize() 函数能够一次性获取到表单中name属性的数据，可序列化表单值创建 URL 编码文本字符串，它的语法格式如下： $('表单id').serialize()，serialize() 函数的其他特点：

1、该方法是 jQuery 封装的，使用时必须引入 jQuery

2、使用 serialize()，各表单域必须有 name 属性，因为name属性的值没有参数的键，就不可能生成键值对，并且name属性名称一定要按照后台接口文档在设置

3、使用该方法得到的结果是一个查询字符串结构：name=value&name=value

4、该方法 能够 获取 隐藏域的值

5、该方法不能得到 禁用状态的值

6、该方法不能得到文件域中的文件信息，所以不能完成文件上传

三、FormData 函数

FormData是HTML5对象，目前可兼容大多主流的浏览器，但不兼容低版本IE浏览器。与普通的Ajax相比，使用FormData 的最大优点就是可以异步上传二进制文件。通过ajax异步提交表单数据，可实现文件上传

（一）、注意事项：

提交 FormData 对象，不能使用 GET 方式，具体以接口文档为准，formdata 是一个二进制数据，在控制台无法直接打印输出 ，创建的 FormData对象可以直接提交给接口。

1 form表单加 enctype="multipart/form-data"；

2 ajax加 processData: false,contentType: false,

（二）、Formdata的两种使用场景：

1.收集表单 --所有--数据：传递form对象： let formdata = new FormData(form)

2.只要收集文件数据 --- 单独的追加文件数据：formdata.append('文件参数的键'，文件对象)