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

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


当前回答

在angular 7中,我使用下面这行代码在控制台获得了条目。

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

其他回答

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。

我希望这能有所帮助。

更新方法:

截至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和loth指出这一点!

旧的回答:

在阅读了这些Mozilla文章之后,似乎没有办法从FormData对象中获取数据。您只能使用它们来构建通过AJAX请求发送的FormData。

我还发现了这个问题,说明了同样的事情: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);

表单数据

var formData = new formData ();//当前为空 formData。追加(“用户名”,“克里斯”); for (formData.keys()的var键){ console.log(关键); } forformdata .values()的变量值{ console.log(价值); }

知道更多

formData.entries()在最新版本中抛出错误。 所以你可以试试下面的方法:

formData.forEach((value: FormDataEntryValue, key: string) => {
      console.log(value, key);
    })

基于@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...of