FormData 对象用以将数据编译成键值对,以便用 XMLHttpRequest 来发送数据。
主要用于:发送表单数据,也可用于发送带键数据(keyed data),而独立于表单使用。
如果表单 enctype 属性设为 multipart/form-data ,则会使用表单的 submit() 方法来发送数据,从而发送数据具有同样形式
把数组直接append到FormData对象中,post的请求会把数组拼接成一个字符串发送给服务器,又不想在服务器端截取字符串。
解决方案:遍历数组把数组项依次append添加到FormData对象,服务器端就可以获取数组了。
var arr=['上海','北京']; var formData = new FormData(); for (var i = 0; i < arr.length; i++) { formData.append('city',arr[i]); }
一、创建FormData的方法通常有两种:
1、 创建一个空的formData对象
let formData = new FormData();
2、通过HTML表单元素创建FormData对象
let formData = new FormData(someFormElement);
二、FromData对象数据的 添加 删除 和 覆盖。
1、添加数据(若对象内没有该key则添加新key,若有该key,则在该key的最后位置追加新值)
formData.append("key","value"); // key --> valueformData.append("key","value1"); // key --> ["value","value1"]
2、删除数据(删除该key内的所有键值)
formData.delete("key")
3、覆盖(会覆盖所有该key对应的值)
formData.set("key","value1");
三、因为formData()里的数据打印不出来,所以提供以下几种方法获取到formData()里的数据。
1、get("key") 获取到该key的第一个值
2、getAll("key") 获取到该key的所有值
3、entries("key") 遍历FormData对象中的所有键值对
四、FormData对象提交数组数据时的注意事项。
1、这种方法组成的数组,提交以后,后台只能获取到该key内的最后一条数据。
formData.append("key","value1");formData.append("key","value2");formData.getAll("key"); // ["value1","value2"]
通过getAll()方法可以看到,此时key为一个数组,但是提交数据后,后台只能接收到 key:"value2" ;
解决办法:
formData.append("key[]","value1");formData.append("key[]","value2");
用这种方法提交数据后,后台的获得的数据为 key:["value1","value2"] ;