关于javascript：如何检查FormData？


How to inspect FormData?

我试过console.log并使用for in遍历它。

这里是FormData上的MDN参考。

两种尝试都在这个小提琴中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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年3月开始，Chrome和Firefox的最新版本现在支持使用FormData.entries()检查FormData。资源。

1
2
3
4
5
6
7
8
9
// 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对象中获取数据。您只能将它们用于构建通过AJAX请求发送的FormData。

我也刚刚发现这个问题指出了同样的问题：FormData.append(" key"，" value")无法正常工作。

解决此问题的一种方法是建立一个常规词典，然后将其转换为FormData：

1
2
3
4
5
6
7
8
9
10
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对象，也可以发送它以便在网络请求控制台中检查它：

1
2
3
var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);
相关讨论

简短答案

1
console.log(...fd)

更长的答案

如果您想检查原始主体的外观，则可以使用Response构造函数(fetch API的一部分)

1
2
3
4
5
6
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方法可以通过扩展运算符和iterator console.log(...array)应用参数。

知道这一点，并且FormData和两个数组的原型中都有一个Symbol.iterator方法的事实，您可以简单地执行此操作而不必循环它，或调用.entries()来获得迭代器的保留权

1
2
3
4
5
6
var fd = new FormData

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

console.log(...fd)

相关讨论

我使用FormData.entries()方法。我不确定是否支持所有浏览器，但在Firefox上可以正常使用。

取自https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/entries

1
2
3
4
5
6
7
8
9
10
// 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()具有更广泛的浏览器支持，但它们仅显示值而不显示键。有关更多信息，请参见链接。

相关讨论

在某些情况下，使用：

1
for(var pair of formData.entries(){...

是不可能的。

我在替换中使用了以下代码：

1
2
3
4
5
6
7
8
9
10
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);

这不是一个很聪明的代码，但是可以工作...

希望对您有所帮助。

相关讨论

ES6 +解决方案：

要查看表单数据的结构：

1
console.log([...formData])

要查看每个键值对：

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

当我在Angular 5+(使用TypeScript 2.4.2)上工作时，我尝试如下进行操作，除了静态检查错误外，它还起作用，但for(var pair of formData.entries())却不起作用。

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

1
2
3
4
5
6
7
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

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

在Stackblitz检查

相关讨论

简单方法

我在角度7中使用了此代码

1
2
3
4
5
6
7
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

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

已经回答了，但是如果您想以一种简单的方式从提交的表单中检索值，则可以将价差运算符与创建一个可迭代的新Map结合使用，以获得一个不错的结构。


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

相关讨论

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

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

您必须了解FormData::entries()返回Iterator的实例。

采取以下示例形式：

1
2
3
4
5
6
<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循环：

1
2
3
4
5
6
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  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对象的条目作为对象记录到控制台的函数。

1
2
3
4
5
6
7
8
9
10
11
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);
};

.entries()上的MDN文档

.next()和.done上的MDN文档

在angular 6的typeScript中，此代码对我有用。

1
2
3
4
var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.

或所有值：

1
console.log(formData.getAll('name')); // return all values

试试这个功能：

1
2
3
4
5
6
function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}
相关讨论

MDN建议采用以下形式：

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

或者

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

如果浏览器或环境不支持最新的JavaScript和FormData API，请考虑添加ES + Polyfills。

我希望这有帮助。

相关讨论