Wie überprüfe ich FormData?

220

Ich habe versucht, console.loges mit zu durchlaufen for in.

Hier die MDN-Referenz zu FormData.

Beide Versuche sind in dieser Geige .

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

Wie kann ich Formulardaten überprüfen, um festzustellen, welche Schlüssel festgelegt wurden?

Penny Liu
quelle
Ist es nicht nur eine Firefox-Funktion?
Shiplu Mokaddim
1
Sie möchten key of fdstatt tun key in fd. Ich weiß noch nicht, warum das technisch ist, aber es funktioniert. Dokumentation hier .
Cilphex
Es gibt also kein Chrome- oder Firefox-Plugin, mit dem Formulardaten angezeigt werden können, ohne dass Sie Ihrem Javascript Code hinzufügen müssen.
Natel

Antworten:

298

Aktualisierte Methode:

Ab März 2016 unterstützen neuere Versionen von Chrome und Firefox die Verwendung FormData.entries()zur Überprüfung von FormData. Quelle .

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

Vielen Dank an Ghost Echo und rloth für den Hinweis!

Alte Antwort:

Nach dem Betrachten dieser Mozilla- Artikel scheint es keine Möglichkeit zu geben, Daten aus einem FormData-Objekt abzurufen. Sie können sie nur zum Erstellen von FormData verwenden, um sie über eine AJAX-Anforderung zu senden.

Ich habe auch gerade diese Frage gefunden, die dasselbe besagt: FormData.append ("Schlüssel", "Wert") funktioniert nicht .

Eine Möglichkeit, dies zu umgehen, besteht darin, ein reguläres Wörterbuch zu erstellen und es dann in FormData zu konvertieren:

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

Wenn Sie ein einfaches FormData-Objekt debuggen möchten, können Sie es auch senden, um es in der Netzwerkanforderungskonsole zu überprüfen:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);
Ryan Endacott
quelle
Nun, das wäre eine gute Idee, ich würde FormData in eine Hilfsmethode einbinden und dann das Objektliteral übergeben. Speichern Sie es dann, falls Sie es später ansehen möchten.
2
Neuere Versionen von Chrome und Firefox bieten jetzt einen Iterator:myFormData.entries()
Rloth
1
Zum Zeitpunkt des Schreibens gab es keine Möglichkeit, auf FormData zuzugreifen. Ich habe jetzt die Antwort aktualisiert, um die neue API widerzuspiegeln. Danke für das Heads Up Rloth!
Ryan Endacott
2
Ich denke, es ist auch nützlich zu beachten, dass Sie die Daten eines vorhandenen Formulars abrufen können, indem Sie : var formData = new FormData(formElement). Wenn Sie JQuery verwenden, können Sie dies folgendermaßen tun : var formData = new FormData($('#formElementID')[0]). Fügen Sie dann die Daten nach Bedarf hinzu.
Peter Valadez
Für die Iteration FormDatain IE / Edge: stackoverflow.com/questions/37938955/…
cs_pupil
78

Kurze Antwort

console.log(...fd)

Längere Antwort

Wenn Sie untersuchen möchten, wie der Rohkörper aussehen würde, können Sie den Response-Konstruktor (Teil der Abruf-API) verwenden.

var fd = new FormData

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

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

Einige von Wünschen schlagen vor, jeden Eintrag von Einträgen zu protokollieren, aber das console.logkann auch mehrere Argumente
console.log(foo, bar)
annehmen. Um eine beliebige Anzahl von Argumenten zu verwenden, können Sie die applyMethode verwenden und als solche aufrufen : console.log.apply(console, array).
Es gibt jedoch eine neue ES6-Methode, um Argumente mit dem Spread-Operator und dem Iterator anzuwenden
console.log(...array).

Wenn Sie dies wissen und die Tatsache, dass FormData und beide Arrays eine Symbol.iteratorMethode in ihrem Prototyp haben, können Sie dies einfach tun, ohne sie durchlaufen zu müssen oder aufzurufen .entries(), um den Halt des Iterators zu erlangen

var fd = new FormData

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

console.log(...fd)

Endlos
quelle
2
Spread Operator !! Ausgezeichnet und sehr einfach, zeigt die Formulardaten als Pseudo-Json-Format an. Danke - für die neue Antwort bekomme ich gerade [[PromiseStatus]]: "ausstehend"
Platinums
5
Oder schreiben Sie einfach von der Webkonsole aus[...fd]
Endless
Höllenglocken - du hast es wieder getan @Endless. Welche Methode heißt das mit den Klammern?
Platinums
Nun, die Klammern sind nur ein Array und Sie erstellen ein neues. Sie verteilen die Einträge mit ...aus Formulardaten, um das neue Array mit allen Elementen zu erstellen. Dann gibt die Konsole einfach das Ergebnis der letzten Zeile aus, die Sie geschrieben haben
Endless
1
beste Antwort hier - sollte den ganzen Gumpf entfernen und einfach das 2. Code-Snippet hinterlassen - vielen Dank
danday74
39

Ich benutze die formData.entries()Methode. Ich bin mir nicht sicher, ob alle Browser unterstützt werden, aber es funktioniert einwandfrei unter Firefox.

Entnommen aus https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries

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

Es gibt auch formData.get()und formData.getAll()mit breiterer Browserunterstützung, aber sie rufen nur die Werte und nicht den Schlüssel auf. Siehe den Link für weitere Informationen.

Ghost Echo
quelle
3
Es ist endlich einfach, in FormData-Objekte zu schauen! Dies funktionierte für mich nach dem Upgrade auf Chrome 50 (veröffentlicht gestern, 13. April 2016).
jbb
2
var Paar von wirft Fehler für mich. Das Ersetzen durch in scheint zumindest etwas zu drucken, ist jedoch kein Schlüssel oder Wert wie in MDN angegeben.
Johnny Welker
1
ES6:for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }
2540625
for ... of ist eine ES6Funktion und funktioniert nur in bestimmten Browsern. Ausgenommen jede Version von IE gemäß MDN
Zanshin13
for of wird in den meisten IE nicht unterstützt. nur in IE Edge unterstützt
Mingca
11

In bestimmten Fällen ist die Verwendung von:

for(var pair of formData.entries(){... 

ist unmöglich.

Ich habe diesen Code als Ersatz verwendet:

var outputLog = {}, iterator = myFormData.entries(), end = false;
while(end == false) {
   var item = iterator.next();
   if(item.value!=undefined) {
       outputLog[item.value[0]] = item.value[1];
   } else if(item.done==true) {
       end = true;
   }
    }
console.log(outputLog);

Es ist kein sehr intelligenter Code, aber es funktioniert ...

Hoffe es ist Hilfe.

Luc
quelle
1
Ich würde die if-Anweisung umdrehen, damit sie donezuerst überprüft wird . doneist die maßgebliche Flagge; Wenn donefalsch oder nicht angegeben, valueist dies ein gültiges Element (auch wenn es den Wert enthält undefined). Wenn donevorhanden und true, ist das Ende der Sequenz erreicht und valuemuss nicht einmal definiert werden. Wenn valuedefiniert doneist true, wann es ist , valuewird es als Rückgabewert des Iterators interpretiert. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Triynko
10

Wenn ich an Angular 5+ (mit TypeScript 2.4.2) arbeite, habe ich Folgendes versucht und es funktioniert mit Ausnahme eines statischen Überprüfungsfehlers, for(var pair of formData.entries())funktioniert aber auch nicht.

formData.forEach((value,key) => {
      console.log(key+" "+value)
});

Überprüfen Sie bei Stackblitz

Gurkan Yesilyurt
quelle
+ nicht kompatibel mit IE 11 (value, key) => {... Kopfschmerzen !
Delphine
1
nett. Ich möchte dir 10 Sterne geben.
Abdullah Nurum
10

Einfache Methode

Ich habe diesen Code in Winkel 8 verwendet

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

 formData.forEach((value,key) => {
    console.log(key+value)
     });
Asifali
quelle
9

ES6 + -Lösungen:

So sehen Sie die Struktur von Formulardaten:

console.log([...formData])

So zeigen Sie jedes Schlüssel-Wert-Paar an:

for (let [key, value] of formData.entries()) {
  console.log(key, ':', value);
}
Hurra, ich helfe
quelle
2

Hier ist eine Funktion zum Protokollieren von Einträgen eines FormData-Objekts in der Konsole als Objekt.

export const logFormData = (formData) => {
    const entries = formData.entries();
    const result = {};
    let next;
    let pair;
    while ((next = entries.next()) && next.done === false) {
        pair = next.value;
        result[pair[0]] = pair[1];
    }
    console.log(result);
};

MDN-Dokument ein .entries()

MDN doc on .next()und.done

2540625
quelle
2
  function abc(){ 
    var form = $('#form_name')[0]; 
        var formData = new FormData(form);
        for (var [key, value] of formData.entries()) { 
            console.log(key, value);
        }
        $.ajax({
            type: "POST",
            url: " ",
            data:  formData,
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function() {

            },
            success: function(data) {


            },

       });
}
Sparsh Turkane
quelle
+ nicht kompatibel mit IE 11 for...of... Kopfschmerzen !
Delphine
2

Sie müssen verstehen, dass FormData::entries()eine Instanz von zurückgibt Iterator.

Nehmen Sie dieses Beispielformular:

<form name="test" id="form-id">
    <label for="name">Name</label>
    <input name="name" id="name" type="text">
    <label for="pass">Password</label>
    <input name="pass" id="pass" type="text">
</form>

und diese JS-Schleife:

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>
Kaiser
quelle
2

In Winkel 7 habe ich Einträge auf der Konsole mit der folgenden Codezeile erhalten.

formData.forEach(entries => console.log(entries));
Yousuf
quelle
2

Bereits beantwortet, aber wenn Sie Werte auf einfache Weise aus einem übermittelten Formular abrufen möchten, können Sie den Spread-Operator in Kombination mit der Erstellung einer neuen iterierbaren Karte verwenden, um eine schöne Struktur zu erhalten.

new Map([...new FormData(form)])

ngr
quelle
obwohl - dies hat ein Problem mit inp_nam [some_mult] [] - nur das letzte ist zu sehen
Halfbit
2

In typeScriptof angular 6funktioniert dieser Code für mich.

var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.

oder für alle Werte:

console.log(formData.getAll('name')); // return all values
AminRostami
quelle
1

Versuchen Sie diese Funktion:

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}
Mauro
quelle
2
Während dieses Code-Snippet die Lösung sein kann, hilft das Hinzufügen einer Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
Johan
0

Das MDN schlägt die folgende Form vor:

let formData = new FormData();
formData.append('name', 'Alex Johnson')
for(let keyValuePair of formData.entries()){
    console.log(keyValuePair); //has form ['name','Alex Johnson']
}

Alternative

for (let [key, value] of formData.entries()) {
 console.log(key, ':', value);
}

Erwägen Sie das Hinzufügen von ES + Polyfills , falls der Browser oder die Umgebung die neuesten JavaScript- und FormData-APIs nicht unterstützt.

Ich hoffe das hilft.

Manioz
quelle
Haben Sie diesen Code getestet, bevor Sie ihn ausführen? formData()sollte erstens groß geschrieben werden. Außerdem for ... of loopruft Ihr in Zeile 3 implizit FormData.entries auf. Sie können dies sehen, indem Sie es new FormData()[Symbol.iterator]in der Konsole ausführen . Wenn Sie dies in Browsern wie Edge ausführen, die FormData.entries nicht unterstützen, erhalten Sie unerwartete Ergebnisse, z. B. das Drucken der auf dem FormData-Objekt verfügbaren Methodennamen:>>> var data = new FormData(); data.append("Foo", "Bar"); for(let x in data){console.log(x)}; <<< 'append'
Lovethenakedgun