it-swarm.com.de

Wie prüfe ich FormData?

Ich habe console.log ausprobiert und es mit for in durchlaufen. 

Hier ist die MDN-Referenz auf 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 prüfen, um festzustellen, welche Schlüssel festgelegt wurden.

137
user1637281

Aktualisierte Methode:

Seit März 2016 unterstützen neuere Versionen von Chrome und Firefox nun die Verwendung von 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]); 
}

Danke an Ghost Echo und rloth für diesen Hinweis!

Alte Antwort:

Nachdem Sie dieseMozillaArtikel betrachtet haben, sieht es so aus, als ob es keine Möglichkeit gibt, Daten aus einem FormData-Objekt herauszuholen. 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 feststellt: FormData.append ("key", "value") funktioniert nicht .

Eine Möglichkeit, dies zu erreichen, wäre, ein normales Wörterbuch aufzubauen und 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 untersuchen:

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

Kurze Antwort

console.log(...fd)

Längere Antwort

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

var fd = new FormData

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

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

Einige möchten vorschlagen, jeden Eintrag von Einträgen zu protokollieren, aber console.log Kann auch mehrere Argumente annehmen
console.log(foo, bar)
Um eine beliebige Anzahl von Argumenten zu verwenden, können Sie die apply -Methode verwenden und sie als solche aufrufen: console.log.apply(console, array).
Es gibt jedoch eine neue ES6-Methode zum Anwenden von Argumenten mit Spread-Operator und Iterator
console.log(...array).

Wenn Sie das wissen und die Tatsache, dass FormData und beide Arrays eine Symbol.iterator - Methode im Prototyp haben, können Sie dies einfach tun, ohne eine Schleife darüber zu machen oder .entries() aufzurufen, um den Hold zu erhalten von Iterator

var fd = new FormData

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

console.log(...fd)
35
Endless

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

Entgenommen 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 einer breiteren Browser-Unterstützung, aber nur die Werte werden angezeigt, nicht der Schlüssel. Siehe den Link für weitere Informationen.

32
Ghost Echo

In bestimmten Fällen kann 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 ...

Ich hoffe es hilft.

8
Luc

Wenn ich an Angular 5+ (mit TypeScript 2.4.2) arbeite, habe ich Folgendes versucht und es funktioniert mit Ausnahme eines statischen Überprüfungsfehlers, aber auch for(var pair of formData.entries()) funktioniert 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)
});

Check bei Stackblitz

3

Hier ist eine Funktion, um Einträge eines FormData-Objekts als Objekt in der Konsole zu protokollieren.

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 zu .entries()

MDN-Dokument zu .next() und .done

2
jtheletter

ES6 + -Lösungen:

So sehen Sie die Struktur der Formulardaten:

console.log([...formData])

So sehen Sie jedes Schlüssel-Wert-Paar:

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

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

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


            },

       });
}
2
sparsh turkane

Probieren Sie diese Funktion aus:

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

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

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

1
ngr

in TypeScript von angular 6 funktioniert 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
0
A.R.F

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

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

Versuche dies ::

let formdata = new formData()
formdata.append('name', 'Alex Johnson')
for(let i of formdata){
    console.log(i)
}
0
Manioz