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

221

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

Вот это Ссылка MDN на 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);
}

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

Пенни лю
источник
Разве это не только функция Firefox?
Шиплу Мокаддим
1
Вы хотите сделать key of fdвместо key in fd. Я пока не знаю, почему это технически, но это работает. Документация здесь .
cilphex
Итак, нет никакого плагина chrome или firefox для отображения данных формы без добавления какого-либо кода в ваш javascript?
Натель

Ответы:

298

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

По состоянию на март 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);
Райан Эндакотт
источник
Хорошо, это было бы хорошей идеей, я бы обернул FormData во вспомогательный метод и затем передал бы литерал объекта. Затем сохраните его на случай, если захотите посмотреть позже.
2
последние версии chrome и firefox теперь предоставляют итератор:myFormData.entries()
rloth
1
На момент написания, не было никакого доступа к FormData. Теперь я обновил ответ, чтобы отразить новый API. Спасибо за внимание, Рлот!
Райан Эндакотт
2
Я думаю , что это также полезно отметить , что вы можете получить данные существующей формы, используя: var formData = new FormData(formElement). Если вы используете JQuery, вы можете сделать это таким образом: var formData = new FormData($('#formElementID')[0]). Затем добавьте данные по мере необходимости.
Питер Валадес
Для итерации FormDataв IE / Edge: stackoverflow.com/questions/37938955/…
cs_pupil
79

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

console.log(...fd)

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

Если вы хотите проверить, как будет выглядеть необработанное тело, вы можете использовать конструктор Response (часть 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 применять аргументы с оператором распространения и итератором
console.log(...array).

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

var fd = new FormData

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

console.log(...fd)

Бесконечный
источник
2
оператор распространения !! Отлично и действительно просто, отображает форматы данных в формате псевдо Json. Спасибо - за Новый Ответ, я просто получаю [[PromiseStatus]]: "в ожидании"
Platinums
5
Или из веб-консоли просто напишите[...fd]
Endless
адские колокольчики - ты сделал это снова @Endless. какой метод вызывается с помощью скобок?
платиновая
ну, скобки - это просто массив, а вы создаете новый. Вы распространяете записи с помощью ...forddata для создания нового массива со всеми элементами, а затем консоль просто выводит результат из последней строки, которую вы написали
Endless
1
лучший ответ здесь - должен удалить все gumpf и просто оставить второй фрагмент кода - большое спасибо
danday74
39

Я использую 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
Наконец легко взглянуть на объекты FormData! Это сработало для меня после обновления до Chrome 50 (выпущено 13 апреля 2016 года).
jbb
2
вар пар из кидает ошибки для меня. Замена его на in, по- видимому, печатает что-то по крайней мере, однако это не ключ или значение, подобные состояниям MDN.
Джонни Уэлкер
1
ES6:for (const pair of formData.entries()) { console.log(pair[0], pair[1]); }
2540625
for ... of - это ES6особенность, и она будет работать только в определенных браузерах. Исключая любую версию IE по MDN
Zanshin13
for не поддерживается в большинстве IE. поддерживается только в IE edge
mingca
11

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

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

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

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

Люк
источник
1
Я бы перевернул оператор if, чтобы он doneсначала проверялся . doneявляется авторитетным флагом; Если donefalse или не указан, то valueэто допустимый элемент (даже если он содержит значение undefined). Когда doneприсутствует и true, конец последовательности достигнут, и valueего даже не нужно определять. Если valueопределено, когда doneесть true, то valueинтерпретируется как возвращаемое значение итератора. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Трийнко
10

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

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

Проверьте в Stackblitz

Гуркан Есильюрт
источник
+ не совместим с IE 11 (value, key) => {... Головная боль !
Дельфина
1
отлично. хочу дать вам 10 звезд.
Абдулла Нурум
10

Простой метод

Я использовал этот код в угловых 8

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

 formData.forEach((value,key) => {
    console.log(key+value)
     });
Asifali
источник
9

Решения ES6 +:

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

console.log([...formData])

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

for (let [key, value] of formData.entries()) {
  console.log(key, ':', value);
}
Ура, я помогаю
источник
2

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

MDN документ на .next()и.done

2540625
источник
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) {


            },

       });
}
редкий туркан
источник
+ не совместим с IE 11 for...of... Головная боль !
Дельфина
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-цикл:

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>
кайзер
источник
2

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

formData.forEach(entries => console.log(entries));
Юсуф
источник
2

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

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

НВВ
источник
хотя - в этом есть проблема с inp_nam [some_mult] [] - виден только последний
полубит
2

в 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
AminRostami
источник
1

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

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}
Mauro
источник
2
Хотя этот фрагмент кода может быть решением, включение пояснения действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код.
Йохан
0

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

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

альтернативно

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

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

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

Manioz
источник
Вы тестировали этот код перед запуском? formData()должен быть написан заглавными буквами, во-первых. Кроме того, for ... of loopв строке 3 неявно вызывается FormData.entries, вы можете увидеть это, запустив new FormData()[Symbol.iterator]консоль. Наконец, если вы запустите это в браузерах, таких как Edge, которые не поддерживают FormData.entries, вы получите неожиданные результаты, такие как печать имен методов, доступных в объекте FormData:>>> var data = new FormData(); data.append("Foo", "Bar"); for(let x in data){console.log(x)}; <<< 'append'
Lovethenakedgun