Jak sprawdzić FormData?

221

Próbowałem console.logi za pomocą pętli za pomocą for in.

Tutaj jest MDN Reference na FormData.

Obie próby są w tym skrzypcach .

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

Jak mogę sprawdzić dane formularza, aby zobaczyć, jakie klucze zostały ustawione.

Penny Liu
źródło
Czy to nie jest tylko funkcja firefox?
Shiplu Mokaddim
1
Chcesz to zrobić key of fdzamiast key in fd. Nie wiem, dlaczego jest to technicznie jeszcze, ale działa. Dokumentacja tutaj .
cilphex
Więc nie ma wtyczki chrome lub firefox do wyświetlania danych formularza bez dodawania kodu do javascript?
natel

Odpowiedzi:

298

Zaktualizowana metoda:

Od marca 2016 r. Najnowsze wersje Chrome i Firefox obsługują teraz FormData.entries()sprawdzanie danych FormData. Źródło .

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

Dzięki Ghost Echo i rlothowi za zwrócenie na to uwagi!

Stara odpowiedź:

Po przejrzeniu tych artykułów Mozilli wygląda na to, że nie ma sposobu na pobranie danych z obiektu FormData. Możesz ich używać tylko do budowania FormData do wysyłania za pośrednictwem żądania AJAX.

Właśnie znalazłem to pytanie, które mówi to samo: FormData.append („klucz”, „wartość”) nie działa .

Jednym ze sposobów byłoby zbudowanie zwykłego słownika, a następnie przekonwertowanie go na 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]);
}

Jeśli chcesz debugować zwykły obiekt FormData, możesz go również wysłać w celu sprawdzenia w konsoli żądań sieciowych:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);
Ryan Endacott
źródło
Byłby to dobry pomysł, owinąłbym FormData metodą pomocniczą, a następnie przekazałbym literał obiektu. Następnie zapisz go na wypadek, gdybyś chciał obejrzeć go później.
2
najnowsze wersje chrome i firefox udostępniają teraz iterator:myFormData.entries()
rloth
1
W momencie pisania nie było możliwości uzyskania dostępu do FormData. Zaktualizowałem odpowiedź, aby odzwierciedlić nowy interfejs API. Dzięki za headlakes!
Ryan Endacott,
2
Myślę, że to również przydatne, aby pamiętać, że można pobrać dane istniejącą formę w użyciu: var formData = new FormData(formElement). Jeśli używasz jQuery, więc można to zrobić: var formData = new FormData($('#formElementID')[0]). Następnie dołącz dane w razie potrzeby.
Peter Valadez,
Do iteracji FormDataw IE / Edge: stackoverflow.com/questions/37938955/…
cs_pupil
79

Krótka odpowiedź

console.log(...fd)

Dłuższa odpowiedź

Jeśli chcesz sprawdzić, jak wyglądałby surowy obiekt, możesz użyć konstruktora odpowiedzi (część interfejsu API pobierania)

var fd = new FormData

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

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

Niektóre z życzeniem sugerujemy zalogowaniu każdy wpis wpisów, ale console.logmoże mieć również wiele argumentów
console.log(foo, bar)
Aby wykonać dowolną liczbę argumentów można użyć applymetody i nazwać go w następujący sposób: console.log.apply(console, array).
Ale istnieje nowy sposób ES6 na stosowanie argumentów za pomocą operatora spread i iteratora
console.log(...array).

Wiedząc o tym, i fakt, że FormData i obie tablice mają Symbol.iteratormetodę w swoim prototypie, możesz po prostu zrobić to bez konieczności zapętlania się nad nią lub wywoływania .entries()iteratora

var fd = new FormData

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

console.log(...fd)

Nieskończony
źródło
2
operator rozrzutu !! Doskonały i bardzo prosty, wyświetla formdata w formacie psuedo Json. Dzięki - za nową odpowiedź, właśnie dostaję [[PromiseStatus]]: „w toku”
platynowy
5
Lub z konsoli internetowej po prostu napisz[...fd]
Endless
piekielne dzwony - zrobiłeś to ponownie @Endless. jaką metodę wywołuje się za pomocą nawiasów?
platinums
Cóż, nawiasy kwadratowe to tylko tablica i tworzysz nową. ...Rozprowadzasz wpisy z formdata, aby utworzyć nową tablicę ze wszystkimi elementami, a następnie konsola po prostu zrzuca wynik z ostatniego napisanego wiersza
Endless
1
najlepsza odpowiedź tutaj - należy usunąć cały gumpf i po prostu zostawić fragment drugiego kodu
wielkie
39

Używam formData.entries()metody Nie jestem pewien co do obsługi wszystkich przeglądarek, ale działa poprawnie w przeglądarce Firefox.

Zaczerpnięte z 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]); 
}

Istnieje również formData.get()i formData.getAll()z szerszą obsługą przeglądarki, ale przynoszą tylko Wartości, a nie Klucz. Zobacz link, aby uzyskać więcej informacji.

Echo Ducha
źródło
3
Wreszcie łatwo jest zajrzeć do obiektów FormData! Działa to dla mnie po aktualizacji do Chrome 50 (wydanej wczoraj, 13 kwietnia 2016 r.).
jbb 14.04.16
2
var para z wyrzuca błędy dla mnie. Zastąpienie go przez in wydaje się co najmniej drukować, jednak nie jest to klucz ani wartość jak stany MDN.
Johnny Welker,
1
ES6:for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }
2540625
for ... of jest ES6funkcją i działa tylko w niektórych przeglądarkach. Wyłączając dowolną wersję IE zgodnie z MDN
Zanshin13
for of nie jest obsługiwany w większości IE. obsługiwane tylko w IE edge
mingca
11

W niektórych przypadkach użycie:

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

jest niemożliwe.

Użyłem tego kodu zamiast:

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

To niezbyt inteligentny kod, ale działa ...

Mam nadzieję, że to pomoc.

Luc
źródło
1
Odwróciłbym instrukcję if, więc donenajpierw sprawdza . donejest autorytatywną flagą; jeśli donejest fałszem lub nie jest określony, to valuejest to prawidłowy element (nawet jeśli zawiera wartość undefined). Kiedy donejest obecny i truekoniec sekwencji został osiągnięty i valuenie trzeba go nawet definiować. Jeśli valuejest zdefiniowane, kiedy donejest true, to valuejest interpretowane jako wartość zwracana przez iterator. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Triynko
10

Podczas pracy z programem Angular 5+ (z TypeScript 2.4.2) próbowałem w następujący sposób i działa on z wyjątkiem błędu sprawdzania statycznego, ale także for(var pair of formData.entries())nie działa.

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

Sprawdź w Stackblitz

Gurkan Yesilyurt
źródło
+ niekompatybilny z IE 11 (value, key) => {... Ból głowy !
Delphine
1
miły. chcę ci dać 10 gwiazdek.
Abdullah Nurum
10

Łatwa metoda

Użyłem tego kodu w kącie 8

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

 formData.forEach((value,key) => {
    console.log(key+value)
     });
Asifali
źródło
9

Rozwiązania ES6 +:

Aby zobaczyć strukturę danych formularza:

console.log([...formData])

Aby zobaczyć każdą parę klucz-wartość:

for (let [key, value] of formData.entries()) {
  console.log(key, ':', value);
}
Hooray Im Helping
źródło
2

Oto funkcja rejestrowania wpisów obiektu FormData w konsoli jako obiektu.

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

Dokument MDN włączony .entries()

Dokument MDN w sprawie .next()i.done

2540625
źródło
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
źródło
+ niekompatybilny z IE 11 for...of... Ból głowy !
Delphine
2

Musisz zrozumieć, że FormData::entries()zwraca instancję Iterator.

Weź ten przykładowy formularz:

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

i ta pętla JS:

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>
kajzer
źródło
2

W Angular 7 dostałem wpisy na konsoli używając poniższego wiersza kodu.

formData.forEach(entries => console.log(entries));
Yousuf
źródło
2

Już odpowiedziałem, ale jeśli chcesz w prosty sposób pobrać wartości z przesłanego formularza, możesz użyć operatora rozkładania w połączeniu z utworzeniem nowej iterowalnej mapy, aby uzyskać ładną strukturę.

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

ngr
źródło
chociaż - to ma problem z inp_nam [some_mult] [] - widoczny jest tylko ostatni
półbit
2

w typeScriptod angular 6, ten kod działa dla mnie.

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

lub dla wszystkich wartości:

console.log(formData.getAll('name')); // return all values
AminRostami
źródło
1

Wypróbuj tę funkcję:

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}
Mauro
źródło
2
Ten fragment kodu może być rozwiązaniem, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie dla czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu.
Johan
0

MDN sugeruje postać następującą:

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

Alternatywnie

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

Rozważ dodanie ES + Polyfills , na wypadek gdyby przeglądarka lub środowisko nie obsługiwało najnowszego JavaScript i FormData API.

Mam nadzieję, że to pomoże.

Manioz
źródło
Czy przetestowałeś ten kod przed uruchomieniem? formData()po pierwsze, należy kapitalizować. Ponadto for ... of loopw linii 3 domyślnie wywoływane jest FormData.entries, można to zobaczyć, uruchamiając new FormData()[Symbol.iterator]w konsoli. Wreszcie, jeśli uruchomisz to w przeglądarkach takich jak Edge, które nie obsługują FormData.entries, otrzymasz nieoczekiwane wyniki, takie jak wydruk nazw metod dostępnych w obiekcie FormData:>>> var data = new FormData(); data.append("Foo", "Bar"); for(let x in data){console.log(x)}; <<< 'append'
Lovethenakedgun