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?

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

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)

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.

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.

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

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

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

Überprüfen Sie bei Stackblitz

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

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

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

  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) {


            },

       });
}

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>

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

formData.forEach(entries => console.log(entries));

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

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

Versuchen Sie diese Funktion:

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}

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.