FormData, созданная из существующей формы, кажется пустой, когда я регистрирую ее [дубликат]

этот вопрос уже есть ответ здесь:

Я пытаюсь получить набор ключей (имена ввода или аналогичные) и значения (входные значения) из веб-формы:

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

JSFiddle

21
form-data javascript

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

но 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:

HTTP request

таким образом, код работает так, как ожидалось.

Я думаю, разъединение здесь заключается в том, что вы ожидаете, что FormData будет работать как объект или массив JavaScript vanilla и позволит вам напрямую смотреть и манипулировать его содержимым. К сожалению, это не работает так-FormData имеет только один метод в его публичный API, которая составляет append. Практически все, что вы можете сделать с ним, это создать его, добавить к нему значения и передать его XMLHttpRequest.

если вы хотите получить значения формы таким образом, чтобы вы могли проверять и манипулировать, вам придется сделайте это старомодным способом: повторяя входные элементы и получая каждое значение по одному-или используя функцию, написанную кем-то другим, например, jQuery. Вот так поток с несколькими подходами к этому:как я могу получить данные формы с помощью JavaScript / jQuery?

5

Я тоже столкнулся с той же проблемой. Я не мог видеть на консоли. Вам нужно добавить следующее В запрос ajax, чтобы данные были отправлены

processData: false, contentType: false
5

согласно документации 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 дает вам загруженный файл, вы можете использовать его для получения имени файла, проверки типов и т. д.

2