Как проверить FormData?

Я пробовал console.log и цикл через него с помощью for in.

здесь MDN Reference на 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);
}

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

119
form-data javascript

9 ответов

Обновление Способ:

по состоянию на март 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]); 
}

спасибо Призрак Эхо и rloth за указание на это!

Ответ:

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

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

один из способов обойти это было бы создать обычный словарь, а затем преобразовать его в виде 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);
160

Я использую 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() С более широкой поддержкой браузера, но они только поднимают значения, а не ключ. См. ссылку для получения дополнительной информации.

27

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

var fd = new FormData

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

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

некоторые из пожеланий предлагают регистрировать каждую запись записей, но console.log также может принимать несколько аргументов
console.log(foo, bar)
чтобы принять любое количество аргументов, вы можете использовать apply метод и назовите его так:console.log.apply(console, array).
Но есть новый способ ES6 применять аргументы с распространение оператор и iterator
console.log(...array).

зная это, и тот факт, что FormData и оба массива имеют Symbol.iterator метод в прототип вы могли бы просто сделать это без цикла, или позвонив .entries() чтобы завладеть итератором

var fd = new FormData

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

console.log(...fd)
15

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

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

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

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

8

когда я работаю над 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)
});

проверьте в Stackblitz

3

вот функция для регистрации записей объекта 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 on .entries()

MDN doc on .next() и .done

2
  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) {


            },

       });
}
2

вы должны понять, что 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-loop:

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

попробуйте это :: 

let formdata = new formData()
formdata.append('name', 'Alex Johnson')
for(let i of formdata){
    console.log(i)
}
0