Lihat FormData: panduan langkah demi langkah

Question

Saya cuba console.log 并使用 for in menggelungkannya.

Berikut ialah rujukan MDN untuk FormData.

Dua percubaan dalam biola ini.

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);
}

Cara memeriksa data borang untuk melihat kekunci yang telah ditetapkan.

Answer 1

Beberapa jawapan ringkas

[...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

Jawapan lebih panjang

Orang lain telah mencadangkan log setiap 条目，但 console.log 也可以采用多个参数
console.log(foo , bar, ...)
要接受任意数量的参数，您可以使用 apply 方法并按如下方式调用它：console.log.apply(console,数组） fd.entry().
Tetapi terdapat cara ES6 baharu untuk melakukan ini menggunakan spread operator dan iterator
console.log(...array).

Ketahui ini, dan sebenarnya kedua-dua FormData dan tatasusunan mempunyai kaedah Symbol.iterator yang menentukan lalai untuk dalam prototaipnya. ..daripada gelung, kemudian anda boleh menggunakan ...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))

Jika anda ingin menyemak rupa badan asal maka anda boleh menggunakan pembina tindak balas (sebahagian daripada Get API) yang akan menukar data borang anda kepada rupa sebenarnya apabila anda memuat naik data borang

var fd = new FormData()

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

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

Answer 2

Kaedah kemas kini:

Sehingga Mac 2016, versi terkini Chrome dan Firefox kini menyokong penggunaan FormData.entries() untuk memeriksa FormData. Sumber.

// 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]); 
}

Terima kasih kepada Ghost Echo dan rloth kerana menunjukkan perkara ini!

Jawapan lama:

Melihat pada ini Mozilla artikel, nampaknya saya tidak boleh mendapatkan data daripada objek FormData. Anda hanya boleh menggunakannya untuk membina FormData untuk dihantar melalui permintaan AJAX.

Saya juga baru mendapati soalan ini mengatakan perkara yang sama: FormData.append("key", "value") tidak berfungsi .

Salah satu cara untuk menyelesaikan masalah ini ialah membina kamus biasa dan kemudian menukarnya kepada 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]);
}

Jika anda ingin menyahpepijat objek FormData biasa, anda juga boleh menghantarnya untuk memeriksanya dalam konsol permintaan rangkaian:

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