1. 程式人生 > >【JS】FormData的使用以及提交陣列的方法

【JS】FormData的使用以及提交陣列的方法

一、建立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 --> value

formData.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"]  ;