如何检查FormData？

Question

我已经尝试过 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);
}

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

Answer 1

更新方法:

截至2016年3月,最近版本的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("key","value")不起作用.

解决这个问题的一种方法是建立一个常规字典,然后将其转换为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);

Answer 2

简短的回答

console.log(...fd)

更长的答案

如果您想检查原始主体的外观,那么您可以使用Response构造函数(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方法可以使用spread运算符和迭代器来应用参数
console.log(...array).

知道这一点,并且FormData和两个数组都有一个Symbol.iterator方法在它的原型中你可以简单地做到这一点而不必循环它,或者调用.entries()以获得迭代器的持有

var fd = new FormData

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

console.log(...fd)

Answer 3

我用的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()与更广泛的浏览器支持,但他们只带来了价值,而不是重点.有关详细信息,请参阅链接.

Answer 4

简单的方法

我在 angular 8 中使用了这段代码

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

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

Answer 5

在某些情况下,使用:

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

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

希望它有所帮助.

Answer 6

ES6 +解决方案：

要查看表单数据的结构：

console.log([...formData])

要查看每个键值对：

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

Answer 7

您可以使用 Array.from()

console.log(Array.from(formData.entries()))

Answer 8

当我在Angular 5+（使用TypeScript 2.4.2）上工作时，我尝试如下进行操作，除了静态检查错误外，它均有效，但也 for(var pair of formData.entries())无法正常工作。

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

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

在Stackblitz检查