Я пробовал console.log
и цикл через это с помощью for in
.
Вот это Ссылка MDN на FormData.
Обе попытки находятся в этой скрипке .
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);
}
Как я могу проверить данные формы, чтобы увидеть, какие ключи были установлены.
javascript
form-data
Пенни лю
источник
источник
key of fd
вместоkey in fd
. Я пока не знаю, почему это технически, но это работает. Документация здесь .Ответы:
Обновленный метод:
По состоянию на март 2016 года последние версии Chrome и Firefox теперь поддерживают использование
FormData.entries()
для проверки FormData. Источник .Спасибо Ghost Echo и Rloth за указание на это!
Старый ответ:
После просмотра этих статей о Mozilla кажется, что нет способа извлечь данные из объекта FormData. Вы можете использовать их только для построения FormData для отправки через AJAX-запрос.
Я также только что нашел этот вопрос, который утверждает то же самое: FormData.append ("ключ", "значение") не работает .
Один из способов обойти это - создать обычный словарь, а затем преобразовать его в FormData:
Если вы хотите отладить простой объект FormData, вы также можете отправить его, чтобы проверить его в консоли сетевых запросов:
источник
myFormData.entries()
var formData = new FormData(formElement)
. Если вы используете JQuery, вы можете сделать это таким образом:var formData = new FormData($('#formElementID')[0])
. Затем добавьте данные по мере необходимости.FormData
в IE / Edge: stackoverflow.com/questions/37938955/…Короткий ответ
Более длинный ответ
Если вы хотите проверить, как будет выглядеть необработанное тело, вы можете использовать конструктор Response (часть API выборки).
Некоторые из желающих предлагают регистрировать каждую запись записей, но
console.log
также может принимать несколько аргументов ,console.log(foo, bar)
чтобы принять любое количество аргументов , вы можете использовать
apply
метод и назвать его как таковые:console.log.apply(console, array)
.Но есть новый способ ES6 применять аргументы с оператором распространения и итератором
console.log(...array)
.Зная это, и тот факт, что FormData и оба массива имеет
Symbol.iterator
метод в своем прототипе, вы можете просто сделать это без необходимости циклически перебирать его или вызывать,.entries()
чтобы захватить итератористочник
[...fd]
...
forddata для создания нового массива со всеми элементами, а затем консоль просто выводит результат из последней строки, которую вы написалиЯ использую
formData.entries()
метод. Я не уверен в поддержке всех браузеров, но он отлично работает в Firefox.Взято с https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries
Существует также
formData.get()
иformData.getAll()
с более широкой поддержкой браузера, но они только поднимают значения, а не ключ. Смотрите ссылку для получения дополнительной информации.источник
for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }
ES6
особенность, и она будет работать только в определенных браузерах. Исключая любую версию IE по MDNВ определенных случаях использование:
невозможно.
Я использовал этот код вместо:
Это не очень умный код, но он работает ...
Надеюсь, это поможет.
источник
done
сначала проверялся .done
является авторитетным флагом; Еслиdone
false или не указан, тоvalue
это допустимый элемент (даже если он содержит значениеundefined
). Когдаdone
присутствует иtrue
, конец последовательности достигнут, иvalue
его даже не нужно определять. Еслиvalue
определено, когдаdone
естьtrue
, тоvalue
интерпретируется как возвращаемое значение итератора. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…Когда я работаю над Angular 5+ (с TypeScript 2.4.2), я попробовал следующее, и это работает, кроме статической ошибки проверки, но также
for(var pair of formData.entries())
не работает.Показать фрагмент кода
Проверьте в Stackblitz
источник
(value, key) => {..
. Головная боль !Простой метод
Я использовал этот код в угловых 8
источник
Решения ES6 +:
Чтобы увидеть структуру данных формы:
Чтобы увидеть каждую пару ключ-значение:
источник
Вот функция для записи записей объекта FormData на консоль как объект.
MDN документ на
.entries()
MDN документ на
.next()
и.done
источник
источник
for...of..
. Головная боль !Вы должны понимать, что
FormData::entries()
возвращает экземплярIterator
.Возьмите этот пример формы:
и этот JS-цикл:
источник
В угловых 7 я получил записи на консоли, используя строку кода ниже.
источник
Уже ответил, но если вы хотите получить значения простым способом из отправленной формы, вы можете использовать оператор распространения в сочетании с повторным созданием новой карты, чтобы получить хорошую структуру.
new Map([...new FormData(form)])
источник
в
typeScript
изangular 6
, этот код работает для меня.или для всех значений:
источник
Попробуйте эту функцию:
источник
MDN предполагает следующую форму:
альтернативно
Рассмотрите возможность добавления ES + Polyfills , если браузер или среда не поддерживают новейшие API JavaScript и FormData.
Надеюсь, это поможет.
источник
formData()
должен быть написан заглавными буквами, во-первых. Кроме того,for ... of loop
в строке 3 неявно вызывается FormData.entries, вы можете увидеть это, запустивnew FormData()[Symbol.iterator]
консоль. Наконец, если вы запустите это в браузерах, таких как Edge, которые не поддерживают FormData.entries, вы получите неожиданные результаты, такие как печать имен методов, доступных в объекте FormData:>>> var data = new FormData(); data.append("Foo", "Bar"); for(let x in data){console.log(x)};
<<< 'append'