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

这里是关于FormData的MDN参考。

两种尝试都在这把小提琴上。

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

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


当前回答

简短的回答

[...fd] // shortest devtool solution
Array.from(fd) // Same as above
console.log(...fd) // shortest script solution
console.log([...fd]) // Think 2D array makes it more readable
console.table([...fd]) // could use console.table if you like that
console.log(Object.fromEntries(fd)) // Works if all fields are uniq
console.table(Object.fromEntries(fd)) // another representation in table form
new Response(fd).text().then(console.log) // To see the entire raw body

再回答

其他人建议记录fd.entries()的每个条目,但是console.log也可以接受多个参数。要获取任意数量的参数,可以使用apply方法并像这样调用它:console.log。应用(控制台、数组)。 但是ES6有一种新的方法来应用扩展操作符和iteratorconsole.log(…array)参数。

知道这一点,事实上,FormData和数组都有一个符号。迭代器方法,该方法指定了…的循环,然后你可以用…展开参数iterable而不必去调用formData.entries()方法(因为这是默认函数),你可以只做(x of formData),如果你喜欢这样

var fd = new FormData() fd.append('key1', 'value1') fd.append('key2', 'value2') fd.append('key2', 'value3') // using it's default for...of specified by Symbol.iterator // Same as calling `fd.entries()` for (let [key, value] of fd) { console.log(`${key}: ${value}`) } // also using it's default for...of specified by Symbol.iterator console.log(...fd) // Only shows up in devtool (not here in this code snippet) console.table([...fd]) // Don't work in IE (use last pair if same key is used more) console.log(Object.fromEntries(fd))

如果你想检查原始的主体看起来像什么,然后你可以使用响应构造函数(获取API的一部分),这将转换你的表单数据,它实际上看起来像当你上传表单数据

var fd = new FormData() fd。追加(“key1”、“value1”) fd。追加(“key2”、“value2”) 新的响应(fd)。text () (console.log)

其他回答

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

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

不是:当我在使用Angular 5(使用TypeScript 2.4.2)时,我尝试了上面的方法,除了静态检查错误外,它可以正常工作,但(var pair of formData.entries())也不能正常工作。

新格式(); formData。append(’key1’,’value1’); formData。append(’key2’,’value2’); 初始化。 游戏机。log (key +”“+价值) ');

去斯塔克布利茨看看

简短的回答

[...fd] // shortest devtool solution
Array.from(fd) // Same as above
console.log(...fd) // shortest script solution
console.log([...fd]) // Think 2D array makes it more readable
console.table([...fd]) // could use console.table if you like that
console.log(Object.fromEntries(fd)) // Works if all fields are uniq
console.table(Object.fromEntries(fd)) // another representation in table form
new Response(fd).text().then(console.log) // To see the entire raw body

再回答

其他人建议记录fd.entries()的每个条目,但是console.log也可以接受多个参数。要获取任意数量的参数,可以使用apply方法并像这样调用它:console.log。应用(控制台、数组)。 但是ES6有一种新的方法来应用扩展操作符和iteratorconsole.log(…array)参数。

知道这一点,事实上,FormData和数组都有一个符号。迭代器方法,该方法指定了…的循环,然后你可以用…展开参数iterable而不必去调用formData.entries()方法(因为这是默认函数),你可以只做(x of formData),如果你喜欢这样

var fd = new FormData() fd.append('key1', 'value1') fd.append('key2', 'value2') fd.append('key2', 'value3') // using it's default for...of specified by Symbol.iterator // Same as calling `fd.entries()` for (let [key, value] of fd) { console.log(`${key}: ${value}`) } // also using it's default for...of specified by Symbol.iterator console.log(...fd) // Only shows up in devtool (not here in this code snippet) console.table([...fd]) // Don't work in IE (use last pair if same key is used more) console.log(Object.fromEntries(fd))

如果你想检查原始的主体看起来像什么,然后你可以使用响应构造函数(获取API的一部分),这将转换你的表单数据,它实际上看起来像当你上传表单数据

var fd = new FormData() fd。追加(“key1”、“value1”) fd。追加(“key2”、“value2”) 新的响应(fd)。text () (console.log)

ES6 +方案:

要查看表单数据的结构:

console.log([...formData])

要查看每个键-值对:

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

在某些情况下,使用:

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

这不是一个非常聪明的代码,但它是有效的……

希望对大家有帮助。

我使用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(),但它们只显示值而不显示键。更多信息请参见链接。