【Ajax】- serialize() 和 FormData()的区别

serialize() 函数和 FormData() 都能够一次性获取到 表单中name属性的数据

1.jQuery 的 serialize() 函数

jQuery 的 serialize() 函数能够一次性获取到表单中name属性的数据，它的语法格式如下： $('表单元素的选择器').serialize();

注意点：需要先应用 jQuery.js 文件再使用方法

axios({
  	url: 'http://www.itcbc.com:3006/api/addbook',
  	method: 'post',
  	// axios支持的参数格式有：
  	// key=value&key=value
  	// {key:value,key:value}
  	// formdata
 	 data: $('#addForm').serialize()    // 获取	的全部数据
}).then(result => { console.log(result) })

serialize() 函数的使用注意点

在使用 serialize() 函数快速获取表单数据时，必须为每个表单域添加 name 属性！ 例如下面的示例中，只能通过 serialize() 函数获取到密码的值：

 <form>
     <!-- 把所有的框框、按钮都放这里面 -->
     <input type="text" /><br />         // 没有name，获取不到
     <input type="password" name="password" /><br />
     <button>提交</button>
 </form>
 ​
 ​
 $('form').serialize(); // password=123

serialize() 函数的其他特点

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

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

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

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

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

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

2.FormData 介绍

FormData 是一个浏览器对象。用于管理表单数据。 IE10+支持。 可以这样理解，FormData 的作用和 jQuery中的 serialize() 作用一样，用于快速收集表单数据 并且可以将创建的 FormData对象直接提交给接口。 典型应用场景：FormData + Ajax 技术实现文件上传的功能。

FormData基本使用方法

假设需要收集 <form>……</form> 里面的所有表单项的值 要求，每个表单元素都具有 name 属性

注意事项：

提交 FormData 对象，不能使用 GET 方式，具体以接口文档为准

formdata 是一个二进制数据，在控制台无法直接打印输出 ，创建的 FormData对象可以直接提交给接口。

只有涉及到文件上传的接口，后台才会以formdata的方式进行处理

 // 1. 获取 form 标签的 DOM对象
 let form = document.querySelector('form');
 // 2. 实例化 FormData 对象，传入 form
 let fd = new FormData(form);
 // 3. 提交数据
 axios.post('/api/formdata', fd).then(result => {    // formdata接口直接传入fd就行
     console.log(result);
 })
 // 但不是每个后台接口都接收formdata，只传数据不传文件
 // 所以需要用到遍历forEach，添加到一个新建的对象中
 let data = {}
   // value:值
   // key:键
   // 将formdata转换为对象
   fd.forEach(function(value, key) {
     data[key] = value
   })
   console.log(data)

在提交数据前，可以使用下列API方法对数据进行查看和修改

 append('key', 'value'); // 向对象中追加数据
 set('key', 'value');    // 修改对象中的数据
 delete ('key');         // 从对象中删除数据
 get('key')              // 获取指定key的一项数据
 getAll('key')           // 获取指定key的全部数据，返回一个数组
 forEach()               // 遍历对象中的数据
 ……

3.FormData和serialize的区别

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

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

4.formdata的两种使用场景

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

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