Ответ 1

Обновленный метод:

По состоянию на март 2016 года последние версии Chrome и Firefox теперь поддерживают FormData.entries() для проверки FormData. Источник.

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

Благодаря Ghost Echo и rloth для указания этого!

Старый ответ:

Посмотрев на эти Mozilla статьи, похоже, что нет способа получить данные из объекта FormData. Вы можете использовать их только для создания FormData для отправки по запросу AJAX.

Я также нашел этот вопрос, который говорит то же самое: FormData.append( "ключ" , "значение" ) не работает.

Один из способов: создать обычный словарь, а затем преобразовать его в FormData:

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

Если вы хотите отладить простой объект FormData, вы также можете отправить его, чтобы проверить его в консоли сетевого запроса:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);

Ответ 2

Я использую метод formData.entries(). Я не уверен в поддержке всех браузеров, но он отлично работает в Firefox.

Взято из https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries

// Create a test FormData object
var formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');

// Display the key/value pairs
for (var pair of formData.entries())
{
 console.log(pair[0]+ ', '+ pair[1]); 
}

Существует также formData.get() и formData.getAll() с более широкой поддержкой браузера, но они вызывают только значения, а не ключ. См. Ссылку для получения дополнительной информации.

Ответ 3

Короткий ответ

console.log(...fd)

Более длинный ответ

Если вы хотите проверить, как будет выглядеть необработанное тело, вы можете использовать конструктор Response (часть API выборки).

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

new Response(fd).text().then(console.log)

Ответ 4

В некоторых случаях использование:

for(var pair of formData.entries(){... 

невозможно.

Я использовал этот код взамен:

var outputLog = {}, iterator = myFormData.entries(), end = false;
while(end == false) {
   var item = iterator.next();
   if(item.value!=undefined) {
       outputLog[item.value[0]] = item.value[1];
   } else if(item.done==true) {
       end = true;
   }
    }
console.log(outputLog);

Это не очень умный код, но он работает...

Надеюсь, что это поможет.

Ответ 5

Когда я работаю над Angular 5+ (с TypeScript 2.4.2), я попробовал следующее, и это работает, за исключением статической ошибки проверки, но также for(var pair of formData.entries()) не работает.

formData.forEach((value,key) => {
      console.log(key+" "+value)
});

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

formData.forEach((value,key) => {
  console.log(key+" "+value)
});

Ответ 6

ES6+ решения:

Чтобы увидеть структуру данных формы:

console.log([...formData])

Чтобы увидеть каждую пару ключ-значение:

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

Ответ 7

Здесь функция для записи записей объекта FormData в консоль как объект.

export const logFormData = (formData) => {
    const entries = formData.entries();
    const result = {};
    let next;
    let pair;
    while ((next = entries.next()) && next.done === false) {
        pair = next.value;
        result[pair[0]] = pair[1];
    }
    console.log(result);
};

MDN doc на .entries()

MDN doc в .next() и .done

Ответ 8

  function abc(){ 
    var form = $('#form_name')[0]; 
        var formData = new FormData(form);
        for (var [key, value] of formData.entries()) { 
            console.log(key, value);
        }
        $.ajax({
            type: "POST",
            url: " ",
            data:  formData,
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function() {

            },
            success: function(data) {


            },

       });
}

Ответ 9

Вы должны понимать, что FormData::entries() возвращает экземпляр Iterator.

Возьмите эту примерную форму:

<form name="test" id="form-id">
    <label for="name">Name</label>
    <input name="name" id="name" type="text">
    <label for="pass">Password</label>
    <input name="pass" id="pass" type="text">
</form>

и этот JS-цикл:

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>

Ответ 10

В угловых 7 я получил записи на консоли, используя строку кода ниже.

formData.forEach(entries => console.log(entries));

Ответ 11

Попробуйте эту функцию:

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}

Ответ 12

Ответ уже получен, но если вы хотите получить значения простым способом из отправленной формы, вы можете использовать оператор распространения в сочетании с повторным созданием новой карты, чтобы получить красивую структуру.

new Map([...new FormData(form)])

Ответ 13

MDN предлагает следующую форму:

let formData = new FormData();
formData.append('name', 'Alex Johnson')
for(let keyValuePair of formData.entries()){
    console.log(keyValuePair); //has form ['name','Alex Johnson']
}

Alternatively

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

Рассмотрите возможность добавления ES+ Polyfills в случае, если браузер или среда не поддерживают последние версии API JavaScript и FormData.

Надеюсь, это поможет.

Ответ 14

в typeScript angular 6 этот код работает для меня.

var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.

или для всех значений:

console.log(formData.getAll('name')); // return all values