Découvrez FormData : un guide étape par étape

Question

J'ai essayé console.log 并使用 for in en boucle.

Voici la référence MDN pour FormData.

Deux tentatives dans ce violon.

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

Comment inspecter les données du formulaire pour voir quelles clés ont été définies.

Answer 1

Quelques réponses courtes

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

Réponse plus longue

D'autres ont suggéré de consigner chaque 条目，但 console.log 也可以采用多个参数
console.log(foo , bar, ...)
要接受任意数量的参数，您可以使用 apply 方法并按如下方式调用它：console.log.apply(console,数组） de fd.entries().
Mais il existe une nouvelle façon ES6 de le faire en utilisant l'opérateur spread et les itérateurs
console.log(...array).

Sachez cela, et en fait, FormData et les tableaux ont une méthode Symbol.iterator qui spécifie une valeur par défaut for dans son prototype. ..of boucle, alors vous pouvez utiliser ...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))

Si vous souhaitez vérifier à quoi ressemble le corps d'origine, vous pouvez utiliser le constructeur de réponse (qui fait partie de l'API Get) qui convertira les données de votre formulaire à ce à quoi elles ressemblent réellement lorsque vous téléchargez les données du formulaire

var fd = new FormData()

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

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

Answer 2

Méthode de mise à jour :

Depuis mars 2016, les dernières versions de Chrome et Firefox prennent désormais en charge l'utilisation de FormData.entries() pour inspecter FormData. Source.

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

Merci à Ghost Echo et rloth de l'avoir signalé !

Ancienne réponse :

En regardant ces Mozilla articles, il semble que je ne parviens pas à obtenir les données de l'objet FormData. Vous ne pouvez les utiliser que pour créer des FormData à envoyer via des requêtes AJAX.

Je viens aussi de trouver cette question disant la même chose : FormData.append("key", "value") ne fonctionne pas .

Une façon de résoudre ce problème consiste à créer un dictionnaire standard, puis à le convertir en 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]);
}

Si vous souhaitez déboguer un objet FormData simple, vous pouvez également l'envoyer pour l'inspecter dans la console de requête réseau :

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