如何检查FormData?

问题描述 投票:160回答:13

我已经尝试了console.log并使用for in循环它。

在这里它是FormData上的MDN Reference

两次尝试都在这个fiddle

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

如何检查表单数据以查看已设置的键。

javascript form-data
13个回答
230
投票

更新方法:

截至2016年3月,最近版本的Chrome和Firefox现在支持使用FormData.entries()检查FormData。 Source

// 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 Echorloth指出这一点!

旧答案:

在查看了qazxsw poi qazxsw poi qazxsw poi后,看起来没有办法从FormData对象中获取数据。您只能使用它们来构建FormData以通过AJAX请求发送。

我也刚刚发现这个问题说明了同样的事情:these

解决这个问题的一种方法是建立一个常规字典,然后将其转换为FormData:

Mozilla

如果要调试普通FormData对象,还可以发送它以便在网络请求控制台中检查它:

articles

1
投票

在角度7中,我使用下面的代码行在控制台上输入了条目。

Iterator

1
投票

试试这个功能:

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

1
投票

已经回答但如果你想从提交的表单中轻松地检索值,你可以使用spread运算符结合创建一个新的Map迭代来获得一个漂亮的结构。

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


0
投票

试试这个 ::

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

0
投票

function formDataToObject(formData) { return Array.from(formData.entries()).reduce((old, pair) => ({ ...old, [pair[0]]: pair[1], }), {}); } new Map([...new FormData(form)]) ,这段代码对我有用。

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

或所有价值观:

typeScript

36
投票

我使用FormData.append("key", "value") is not working方法。我不确定所有的浏览器支持,但它在Firefox上运行良好。

取自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]); }

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

formData.entries()https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries也有更广泛的浏览器支持,但它们只提出了价值而不是关键。有关详细信息,请参阅链接。


35
投票

Short answer

// 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]); 
}

Longer answer

如果您想检查原始主体的外观,那么您可以使用formData.get()(fetch API的一部分)

formData.getAll()

一些愿望建议记录条目的每个条目,但console.log(...fd) 也可以采用多个参数 Response constructor 要获取任意数量的参数,您可以使用var fd = new FormData fd.append("key1", "value1") fd.append("key2", "value2") new Response(fd).text().then(console.log)方法并将其称为:console.log。 但是有一种新的ES6方法可以使用console.log(foo, bar)和iterator来应用参数 apply

知道这一点,并且FormData和两个数组在它的原型中都有一个console.log.apply(console, array)方法的事实你可以简单地做到这一点,而不必循环它,或调用spread operator来获得迭代器的持有

console.log(...array)

8
投票

在某些情况下,使用:

Symbol.iterator

是不可能的。

我已经用这个代码代替了:

.entries()

这不是一个非常聪明的代码,但它的工作原理......

希望它有所帮助。


5
投票

当我正在使用Angular 5+(使用TypeScript 2.4.2)时,我尝试如下,除了静态检查错误之外它还可以工作,但var fd = new FormData fd.append("key1", "value1") fd.append("key2", "value2") console.log(...fd)也不起作用。

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

for(var pair of formData.entries())


4
投票

ES6 +解决方案:

要查看表单数据的结构:

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

2
投票

这是一个将FormData对象的条目作为对象记录到控制台的函数。

Check at Stackblitz

console.log([...formData])

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


2
投票
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);
};

2
投票

您必须了解MDN doc on .entries()返回MDN doc on .next() and .done的实例。

以此示例形式:

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


            },

       });
}

这个JS循环:

FormData::entries()
© www.soinside.com 2019 - 2024. All rights reserved.