关键词搜索

全站搜索
×
密码登录在这里
×
注册会员
×

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

Javascript FormData添加数组提交的方法

发布2023-07-19 浏览260次

详情内容

FormData 对象用以将数据编译成键值对,以便用 XMLHttpRequest 来发送数据。

主要用于:发送表单数据,也可用于发送带键数据(keyed data),而独立于表单使用。

如果表单 enctype 属性设为 multipart/form-data ,则会使用表单的 submit() 方法来发送数据,从而发送数据具有同样形式

image.png

把数组直接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"]  ;

点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
确定支付下载