檢查 FormData：分步指南

Question

我嘗試過 console.log 並使用 for in 循環它。

這裡是 FormData 的 MDN 參考。

兩次嘗試都在這個小提琴中。

var fd = new FormData(),
    key;

// poulate with dummy data
fd.append("key1", "alskdjflasj");
fd.append("key2", "alskdjflasj");

// does not do anything useful
console.log(fd);

// does not do anything useful   
for(key in fd) {
    console.log(key);
}

如何檢查表單資料以查看已設定哪些鍵。

Answer 1

一些簡短的答案

[...fd] // shortest devtool solution
Array.from(fd) // Same as above
console.log(...fd) // shortest script solution
console.log([...fd]) // Think 2D array makes it more readable
console.table([...fd]) // could use console.table if you like that
console.log(Object.fromEntries(fd)) // Works if all fields are uniq
console.table(Object.fromEntries(fd)) // another representation in table form
new Response(fd).text().then(console.log) // To see the entire raw body

更長的答案

其他人建議記錄fd.entries() 的每個條目，但console.log 也可以採用多個參數
console.log(foo , bar, ...)
要接受任意數量的參數，您可以使用apply 方法並如下呼叫它：console.log.apply(console,數組）。
但有一種新的 ES6 方法可以使用 擴充運算子 a> 和迭代器
console.log(...array)。

知道這一點，事實上 FormData 和陣列的兩者都有一個 Symbol.iterator 方法在其原型中指定預設的 for。 ..of 循環，那麼您可以使用...iterable 展開參數，而不必去呼叫formData.entries() 方法（因為這是預設函數）如果您願意，您可以執行for (x of formData)

var fd = new FormData()

fd.append('key1', 'value1')
fd.append('key2', 'value2')
fd.append('key2', 'value3')

// using it's default for...of specified by Symbol.iterator
// Same as calling `fd.entries()`
for (let [key, value] of fd) {
  console.log(`${key}: ${value}`)
}

// also using it's default for...of specified by Symbol.iterator    
console.log(...fd)

// Only shows up in devtool (not here in this code snippet)
console.table([...fd])

// Don't work in IE (use last pair if same key is used more)
console.log(Object.fromEntries(fd))

如果您想檢查原始主體的外觀，那麼您可以使用回應建構子（取得API 的一部分），這會將您的表單資料轉換為上傳表單資料時實際的樣子

var fd = new FormData()

fd.append('key1', 'value1')
fd.append('key2', 'value2')

new Response(fd).text().then(console.log)

Answer 2

更新方法：

#

截至 2016 年 3 月，最新版本的 Chrome 和 Firefox 現在支援使用 FormData.entries() 來檢查 FormData。 來源。

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

感謝Ghost Echo和rloth 指出了這一點！

舊答案：

#

查看這些 Mozilla 文章，看起來無法從 FormData 物件取得資料。您只能使用它們來建立 FormData 以透過 AJAX 請求發送。

我還剛剛發現這個問題說明了同樣的事情：FormData.append("鍵」、「值」）不起作用。

解決這個問題的一種方法是建立一個常規字典，然後將其轉換為 FormData：

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

如果您想偵錯普通的 FormData 對象，您也可以發送它以便在網路請求控制台中檢查它：

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);