【JS】FormData的使用以及提交陣列的方法
阿新 • • 發佈:2018-12-03
一、建立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"] ;