表单提交FormData方法详解

FormData的主要用途有两个：

1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

2、异步上传文件

注意：需要设置Content-Type

eg：Vuejs结合axios时设置：

let config= headers: {'Content-Type': 'application/x-www-form-urlencoded'}

axios.post('/path', {params:.. },config).then(...).catch(...)

一、创建formData对象

1、创建一个空对象：

2、通过表单对formData进行初始化

创建表单：

通过表单元素作为参数，实现对formData的初始化：

二、 *** 作方法

1、通过get(key)与getAll(key)来获取相对应的值

2、通过append(key,value)在数据末尾追加数据

3、通过set(key, value)来设置修改数据

4、通过has(key)来判断是否存在对应的key值

5、通过delete(key)可以删除数据

三、通过XMLHttpRequest发送数据

创建表单：

发送数据：

原文链接： https://www.jianshu.com/p/e984c3619019

一. FormData (HTML5对象，低于IE10 的IE浏览器不支持)

提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出

常用方法：

1.FormData.append(key,value) //向FormData对象中添加键值对

2.FormData.delete(key) //删除指定的key及对应的value,有多个相同的key会一并删除

3.FormData.get(key) //获取指定key的值，如果多个，返回第一个 （IE，Safari完全不支持）

4.FormData.getAll(key) //获取指定key的所有值，返回为数组 （IE，Safari完全不支持）

5.FormData.has(key) //是否含有指定的key，返回boolean值 （IE，Safari完全不支持）

6.FormData.set() //对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。（IE，Safari完全不支持）

例子1 (使用<form>表单构造FormData对象，form标签需添加enctype = "multipart/form-data")

例子2（不使用<form>表单构造FormData对象）

二. jquery的ajax请求常用参数详解

---