我已经尝试了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 6的typeScript中,这段代码为我工作。

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

其他回答

已经回答了,但是如果你想以一种简单的方式从提交的表单中检索值,你可以使用扩展操作符并创建一个新的Map iterable来获得一个不错的结构。

新地图([…新FormData(形式)])

简单的方法

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

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

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

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

下面是一个将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);
};

.entries()上的MDN文档

MDN文档。next()和。done

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。

我希望这能有所帮助。