Próbowałem console.log
i 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.
javascript
form-data
Penny Liu
źródło
źródło
key of fd
zamiastkey in fd
. Nie wiem, dlaczego jest to technicznie jeszcze, ale działa. Dokumentacja tutaj .Odpowiedzi:
Zaktualizowana metoda:
Od marca 2016 r. Najnowsze wersje Chrome i Firefox obsługują teraz
FormData.entries()
sprawdzanie danych FormData. Źródło .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:
Jeśli chcesz debugować zwykły obiekt FormData, możesz go również wysłać w celu sprawdzenia w konsoli żądań sieciowych:
źródło
myFormData.entries()
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.FormData
w IE / Edge: stackoverflow.com/questions/37938955/…Krótka odpowiedź
Dłuższa odpowiedź
Jeśli chcesz sprawdzić, jak wyglądałby surowy obiekt, możesz użyć konstruktora odpowiedzi (część interfejsu API pobierania)
Niektóre z życzeniem sugerujemy zalogowaniu każdy wpis wpisów, ale
console.log
może mieć również wiele argumentówconsole.log(foo, bar)
Aby wykonać dowolną liczbę argumentów można użyć
apply
metody 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.iterator
metodę w swoim prototypie, możesz po prostu zrobić to bez konieczności zapętlania się nad nią lub wywoływania.entries()
iteratoraźródło
[...fd]
...
Rozprowadzasz wpisy z formdata, aby utworzyć nową tablicę ze wszystkimi elementami, a następnie konsola po prostu zrzuca wynik z ostatniego napisanego wierszaUż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
Istnieje również
formData.get()
iformData.getAll()
z szerszą obsługą przeglądarki, ale przynoszą tylko Wartości, a nie Klucz. Zobacz link, aby uzyskać więcej informacji.źródło
for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }
ES6
funkcją i działa tylko w niektórych przeglądarkach. Wyłączając dowolną wersję IE zgodnie z MDNW niektórych przypadkach użycie:
jest niemożliwe.
Użyłem tego kodu zamiast:
To niezbyt inteligentny kod, ale działa ...
Mam nadzieję, że to pomoc.
źródło
done
najpierw sprawdza .done
jest autorytatywną flagą; jeślidone
jest fałszem lub nie jest określony, tovalue
jest to prawidłowy element (nawet jeśli zawiera wartośćundefined
). Kiedydone
jest obecny itrue
koniec sekwencji został osiągnięty ivalue
nie trzeba go nawet definiować. Jeślivalue
jest zdefiniowane, kiedydone
jesttrue
, tovalue
jest interpretowane jako wartość zwracana przez iterator. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…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.Pokaż fragment kodu
Sprawdź w Stackblitz
źródło
(value, key) => {..
. Ból głowy !Łatwa metoda
Użyłem tego kodu w kącie 8
źródło
Rozwiązania ES6 +:
Aby zobaczyć strukturę danych formularza:
Aby zobaczyć każdą parę klucz-wartość:
źródło
Oto funkcja rejestrowania wpisów obiektu FormData w konsoli jako obiektu.
Dokument MDN włączony
.entries()
Dokument MDN w sprawie
.next()
i.done
źródło
źródło
for...of..
. Ból głowy !Musisz zrozumieć, że
FormData::entries()
zwraca instancjęIterator
.Weź ten przykładowy formularz:
i ta pętla JS:
źródło
W Angular 7 dostałem wpisy na konsoli używając poniższego wiersza kodu.
źródło
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)])
źródło
w
typeScript
odangular 6
, ten kod działa dla mnie.lub dla wszystkich wartości:
źródło
Wypróbuj tę funkcję:
źródło
MDN sugeruje postać następującą:
Alternatywnie
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.
źródło
formData()
po pierwsze, należy kapitalizować. Ponadtofor ... of loop
w linii 3 domyślnie wywoływane jest FormData.entries, można to zobaczyć, uruchamiającnew 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'