Découvrez FormData : un guide étape par étape
P粉662361740
P粉662361740 2023-10-12 09:40:15
0
2
494

J'ai essayéconsole.log并使用for inen 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.

P粉662361740
P粉662361740

répondre à tous (2)
P粉235202573

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 a> et les itérateurs
console.log(...array).

Sachez cela, et en fait,FormDataet les tableaux ont une méthodeSymbol.iteratorqui spécifie une valeur par défautfor dans son prototype. ..ofboucle, 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 leconstructeur 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)
    P粉141911244

    Méthode de mise à jour :

    Depuis mars 2016, les dernières versions de Chrome et Firefox prennent désormais en charge l'utilisation deFormData.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 Echoetrlothde l'avoir signalé !

    Ancienne réponse :

    En regardantcesMozillaarticles, 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);
      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!