FormData, созданная из существующей формы, кажется пустой, когда я регистрирую ее [дубликат]
этот вопрос уже есть ответ здесь:
- Как проверить FormData? 9 ответов
Я пытаюсь получить набор ключей (имена ввода или аналогичные) и значения (входные значения) из веб-формы:
<body>
<form>
<input type="text" name="banana" value="swag">
</form>
<script>
var form = document.querySelector('form');
var formData = new FormData(form);
</script>
</body>
по словам документация FormData, formData
должны содержать ключи и значения из формы. Но!--2--> показывает formData
пусто.
как я могу быстро получить данные из формы с помощью FormData?
4 ответов
обновление: спецификация XHR теперь включает в себя еще несколько функций для проверки объектов FormData.
FireFox поддерживает новые функции с v39.0, Chrome планируется получить поддержку в v50. Не уверен в других браузерах.
var form = document.querySelector('form');
var formData = new FormData(form);
for (var [key, value] of formData.entries()) {
console.log(key, value);
}
но
console.log(formData)
показываетformData
пусто.
что вы подразумеваете под "пустой"? Когда я проверить это в Chrome, он показывает ‣ FormData {append: function}
... то есть это объект FormData, чего мы и ожидали. Я сделал скрипку и ... --10-->расширено до кода к этому:
var form = document.querySelector('form'),
formData = new FormData(form),
req = new XMLHttpRequest();
req.open("POST", "/echo/html/")
req.send(formData);
...и это то, что я видел в панели Chrome Developer Tools Network:
таким образом, код работает так, как ожидалось.
Я думаю, разъединение здесь заключается в том, что вы ожидаете, что FormData будет работать как объект или массив JavaScript vanilla и позволит вам напрямую смотреть и манипулировать его содержимым. К сожалению, это не работает так-FormData имеет только один метод в его публичный API, которая составляет append
. Практически все, что вы можете сделать с ним, это создать его, добавить к нему значения и передать его XMLHttpRequest.
если вы хотите получить значения формы таким образом, чтобы вы могли проверять и манипулировать, вам придется сделайте это старомодным способом: повторяя входные элементы и получая каждое значение по одному-или используя функцию, написанную кем-то другим, например, jQuery. Вот так поток с несколькими подходами к этому:как я могу получить данные формы с помощью JavaScript / jQuery?
Я тоже столкнулся с той же проблемой. Я не мог видеть на консоли. Вам нужно добавить следующее В запрос ajax, чтобы данные были отправлены
processData: false, contentType: false
согласно документации MDN на виде FormData
объект, реализующий FormData, может непосредственно использоваться в for...из структуры вместо записей (): for (var p of myFormData) эквивалентно for (var p of myFormData).вступления.))(
итерация по FormData.записи () не сработали для меня.
вот что я делаю, чтобы проверить, является ли formData пустым или нет:
var isFormDataEmpty= true;
for (var p of formData) {
isFormDataEmpty= false;
break;
}
как итерация по formData дает вам загруженный файл, вы можете использовать его для получения имени файла, проверки типов и т. д.