我已经尝试 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);
}
如何检查表单数据以查看已设置的键。
更新方法：
截至 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") is not working。
解决此问题的一种方法是建立一个常规字典，然后将其转换为 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);
[...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
其他人建议记录每个entry of fd.entries()，但console.log也可以采用多个参数console.log(foo, bar, ...)
要采用任意数量的参数，您可以使用该apply方法并这样调用它console.log.apply(console, array)：
但是有一种新的 ES6 方法可以使用扩展运算符和迭代器应用参数console.log(...array)。
知道了这一点，而且FormData和数组在它的原型中都有一个Symbol.iterator方法，该方法指定了默认的 for...of循环，那么你可以展开参数...iterable而不必去调用formData.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)
// Don't work in IE (use last pair if same key is used more)
console.log(Object.fromEntries(fd))如果您想检查原始正文的样子，那么您可以使用Response 构造函数（获取 API 的一部分），这会将您的表单数据转换为您上传表单数据时的实际样子
var fd = new FormData()
fd.append('key1', 'value1')
fd.append('key2', 'value2')
new Response(fd).text().then(console.log)我使用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()广泛的浏览器支持，但它们只显示值而不是键。有关更多信息，请参阅链接。
ES6+ 解决方案：
查看表单数据的结构：
console.log([...formData])
查看每个键值对：
for (let [key, value] of formData.entries()) {
console.log(`${key}: ${value}`);
}
角
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）时，我按照上面的方法进行了尝试，除了静态检查错误之外它可以正常工作，但也 for(var pair of formData.entries())无法正常工作。
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
formData.forEach((value,key) => {
console.log(key+" "+value)
});简单的方法
我在 Angular 8 中使用了这段代码
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
formData.forEach((value,key) => {
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);
这不是一个非常聪明的代码，但它可以工作......
希望有帮助。
您可以使用 Array.from()
console.log(Array.from(formData.entries()))
在typeScript中angular 6，这段代码对我有用。
var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.
或所有值：
console.log(formData.getAll('name')); // return all values
这是一个将 FormData 对象的条目作为对象记录到控制台的函数。
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);
};
您必须了解FormData::entries()返回的实例Iterator。
采取这个示例形式：
<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 循环：
<script>
var it = new FormData( document.getElementById('form-id') ).entries();
var current = {};
while ( ! current.done ) {
current = it.next();
console.info( current )
}
</script>
在 Angular 7 中，我使用下面的代码行在控制台上获得了条目。
formData.forEach(entries => console.log(entries));
已经回答了，但是如果您想以一种简单的方式从提交的表单中检索值，您可以使用扩展运算符并结合创建一个新的 Map 可迭代来获得一个不错的结构。
new Map([...new FormData(form)])
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) {
},
});
}
MDN 建议采用以下形式：
let formData = new FormData();
formData.append('name', 'Alex Johnson')
for(let keyValuePair of formData.entries()){
console.log(keyValuePair); //has form ['name','Alex Johnson']
}
或者
for (let [key, value] of formData.entries()) {
console.log(key, ':', value);
}
考虑添加ES+ Polyfills，以防浏览器或环境不支持最新的 JavaScript 和 FormData API。
我希望这有帮助。
试试这个功能：
function formDataToObject(formData) {
return Array.from(formData.entries()).reduce((old, pair) => ({
...old,
[pair[0]]: pair[1],
}), {});
}
将其映射到这样的对象：
let debug_form_data = {}
form_data.forEach((value,key)=> debug_form_data[key]=value)
console.debug(debug_form_data)
基于@2540625 回答ECMAScript 5兼容版本...
// NOTE: Inspect a HTML request data ("FormData"). By Questor
function inspRqstData(rqstData) {
var dataEntries = rqstData.entries();
var rqstDataAsJO = {};
var dataNext;
var dataPair;
while ((dataNext = dataEntries.next() || true) && dataNext.done === false) {
dataPair = dataNext.value;
console.log(dataPair[0], dataPair[1]);
}
}
var rqstData = new FormData();
rqstData.append('key1', 'value1');
rqstData.append('key2', 'value2');
inspRqstData(rqstData);
注意： “FormData”可能是包含“ECMAScript 5”JavaScript 支持的东西。这可以通过在这些参考资料中交叉有关浏览器支持/兼容性的信息来推断（参见 IE10）...
https://www.w3schools.com/js/js_es5.asp
https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData#browser_compatibility
额外：将 HTML 请求数据（“FormData”）转换为简单的 JavaScript 对象...
// NOTE: Convert a HTML request data ("FormData") to a JavaScript Object. By Questor
function rqstDataToJO(rqstData) {
var dataEntries = rqstData.entries();
var rqstDataAsJO = {};
var dataNext;
var dataPair;
while ((dataNext = dataEntries.next() || true) && dataNext.done === false) {
dataPair = dataNext.value;
rqstDataAsJO[dataPair[0]] = dataPair[1];
}
return rqstDataAsJO;
}
var rqstData = new FormData();
rqstData.append("key1", "value1");
rqstData.append("key2", "value2");
var rqstDataAsJO = rqstDataToJO(rqstData);
console.log(rqstDataAsJO.key1)
console.log(rqstDataAsJO.key1)
谢谢！=D
其他参考...
https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for.. 。的
表单数据
var formData = new FormData(); // Currently empty
formData.append('username', 'Chris');
for (var key of formData.keys()) {
console.log(key);
}
for (var value of formData.values()) {
console.log(value);
}console.log(myformdata.get("mykey");
我认为它的答案！你可以像这样使用“getall”
console.log(myformdata.getall());