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 должен содержать ключи и значения из формы. Но console.log(formData) показывает, что formData пуст.

Как быстро получить данные из формы с помощью FormData?

JSFiddle

Ответы

Ответ 1

Обновление: спецификация XHR теперь включает еще несколько функций для проверки объектов FormData.

FireFox поддерживает новые функции начиная с версии 39.0, Chrome планируется получить поддержку в версии v50. Не уверен насчет других браузеров.

var form = document.querySelector('form');
var formData = new FormData(form);

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

//or

console.log(...formData)

Ответ 2

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

processData: false, contentType: false

Ответ 3

Но console.log(formData) показывает, что formData пуст.

Что вы подразумеваете под "пустым"? Когда я проверяю это в Chrome, он показывает ‣ FormData {append: function}... то есть объект FormData, чего мы и ожидали. Я сделал скрипку и расширил код до этого:

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-объект или массив и позволит вам непосредственно просматривать и манипулировать его содержимым. К сожалению, это не работает так: у FormData есть только один метод в своем публичном API, который append. Практически все, что вы можете с ним сделать - это создать его, добавить к нему значения и передать его в XMLHttpRequest.

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

Ответ 4

Согласно документации MDN на FormData

Объект, реализующий FormData, может быть непосредственно использован в for... для структуры, а не для entries(): for (var p myFormData) эквивалентен for (var p myFormData.entries()).

Итерация по FormData.entries() не сработала для меня.

Вот что я делаю, чтобы проверить, пуст ли formData или нет:

                var isFormDataEmpty= true;
                for (var p of formData) {
                    isFormDataEmpty= false;
                    break;
                }

Как итерация над formData дает вам загруженный файл, вы можете использовать его для получения имени файла, проверки типа файла и т.д.