Ich habe versucht, console.log
es 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?
javascript
form-data
Penny Liu
quelle
quelle
key of fd
statt tunkey in fd
. Ich weiß noch nicht, warum das technisch ist, aber es funktioniert. Dokumentation hier .Antworten:
Aktualisierte Methode:
Ab März 2016 unterstützen neuere Versionen von Chrome und Firefox die Verwendung
FormData.entries()
zur Überprüfung von FormData. Quelle .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:
Wenn Sie ein einfaches FormData-Objekt debuggen möchten, können Sie es auch senden, um es in der Netzwerkanforderungskonsole zu überprüfen:
quelle
myFormData.entries()
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.FormData
in IE / Edge: stackoverflow.com/questions/37938955/…Kurze Antwort
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.
Einige von Wünschen schlagen vor, jeden Eintrag von Einträgen zu protokollieren, aber das
console.log
kann auch mehrere Argumenteconsole.log(foo, bar)
annehmen. Um eine beliebige Anzahl von Argumenten zu verwenden, können Sie die
apply
Methode 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.iterator
Methode 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 erlangenquelle
[...fd]
...
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 habenIch 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
Es gibt auch
formData.get()
undformData.getAll()
mit breiterer Browserunterstützung, aber sie rufen nur die Werte und nicht den Schlüssel auf. Siehe den Link für weitere Informationen.quelle
for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }
ES6
Funktion und funktioniert nur in bestimmten Browsern. Ausgenommen jede Version von IE gemäß MDNIn bestimmten Fällen ist die Verwendung von:
ist unmöglich.
Ich habe diesen Code als Ersatz verwendet:
Es ist kein sehr intelligenter Code, aber es funktioniert ...
Hoffe es ist Hilfe.
quelle
done
zuerst überprüft wird .done
ist die maßgebliche Flagge; Wenndone
falsch oder nicht angegeben,value
ist dies ein gültiges Element (auch wenn es den Wert enthältundefined
). Wenndone
vorhanden undtrue
, ist das Ende der Sequenz erreicht undvalue
muss nicht einmal definiert werden. Wennvalue
definiertdone
isttrue
, wann es ist ,value
wird es als Rückgabewert des Iterators interpretiert. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…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.Code-Snippet anzeigen
Überprüfen Sie bei Stackblitz
quelle
(value, key) => {..
. Kopfschmerzen !Einfache Methode
Ich habe diesen Code in Winkel 8 verwendet
quelle
ES6 + -Lösungen:
So sehen Sie die Struktur von Formulardaten:
So zeigen Sie jedes Schlüssel-Wert-Paar an:
quelle
Hier ist eine Funktion zum Protokollieren von Einträgen eines FormData-Objekts in der Konsole als Objekt.
MDN-Dokument ein
.entries()
MDN doc on
.next()
und.done
quelle
quelle
for...of..
. Kopfschmerzen !Sie müssen verstehen, dass
FormData::entries()
eine Instanz von zurückgibtIterator
.Nehmen Sie dieses Beispielformular:
und diese JS-Schleife:
quelle
In Winkel 7 habe ich Einträge auf der Konsole mit der folgenden Codezeile erhalten.
quelle
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)])
quelle
In
typeScript
ofangular 6
funktioniert dieser Code für mich.oder für alle Werte:
quelle
Versuchen Sie diese Funktion:
quelle
Das MDN schlägt die folgende Form vor:
Alternative
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.
quelle
formData()
sollte erstens groß geschrieben werden. Außerdemfor ... of loop
ruft Ihr in Zeile 3 implizit FormData.entries auf. Sie können dies sehen, indem Sie esnew 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'