Я пробовал 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);
}
Как я могу проверить данные формы, чтобы увидеть, какие ключи были установлены.
Обновленный метод:
По состоянию на март 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.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() с более широкой поддержкой браузера, но они вызывают только значения, а не ключ. См. Ссылку для получения дополнительной информации.
console.log(...fd)
Если вы хотите проверить, как будет выглядеть необработанное тело, вы можете использовать конструктор Response (часть API выборки).
var fd = new FormData
fd.append("key1", "value1")
fd.append("key2", "value2")
new Response(fd).text().then(console.log)В некоторых случаях использование:
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);
Это не очень умный код, но он работает...
Надеюсь, что это поможет.
Когда я работаю над 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)
});ES6+ решения:
Чтобы увидеть структуру данных формы:
console.log([...formData])
Чтобы увидеть каждую пару ключ-значение:
for (let [key, value] of formData.entries()) {
console.log(key, ':', value);
}
Здесь функция для записи записей объекта 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);
};
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) {
},
});
}
Вы должны понимать, что 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>
В угловых 7 я получил записи на консоли, используя строку кода ниже.
formData.forEach(entries => console.log(entries));
Попробуйте эту функцию:
function formDataToObject(formData) {
return Array.from(formData.entries()).reduce((old, pair) => ({
...old,
[pair[0]]: pair[1],
}), {});
}
Ответ уже получен, но если вы хотите получить значения простым способом из отправленной формы, вы можете использовать оператор распространения в сочетании с повторным созданием новой карты, чтобы получить красивую структуру.
new Map([...new FormData(form)])
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.
Надеюсь, это поможет.
в 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