如何检查表单数据？简短的回答很少更长的答案

javascript form-data

2022-08-29 23:43:55

我已经尝试并使用.console.logfor 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);
}

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

答案 1

更新的方法：

截至2016年3月，最新版本的Chrome和Firefox现在支持使用来检查FormData。来源。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]); 
}

感谢Ghost Echo和rloth指出这一点！

旧答案：

在查看了这些 Mozilla 文章之后，似乎没有办法从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);

答案 2

简短的回答很少

[...fd] // shortest devtool solution
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

更长的答案

其他人建议记录每个，但也可以采用多个参数

要获取任意数量的参数，您可以使用该方法并按如下方式调用它：。
但是有一种新的 ES6 方法可以使用传播运算符和迭代器
应用参数。entry of fd.entries()console.logconsole.log(foo, bar, ...)applyconsole.log.apply(console, array)console.log(...array)

知道这一点，以及FormData和数组在其原型中都有一个Symbol.iterator方法的事实，该方法指定了...的循环，那么你就可以分散参数，而不必去调用方法（因为这是默认函数），如果你愿意，你可以这样做...iterableformData.entries()for (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)

console.table([...fd]) // Only beeing shown in console devtool

// Don't work in IE (use last pair if same key is used more)
console.log(Object.fromEntries(fd))

如果您想检查原始正文的外观，则可以使用响应构造函数（fetch API的一部分），这会将您的表单数据转换为上传表单数据时的实际外观

var fd = new FormData()

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

new Response(fd).text().then(console.log)