我已经尝试了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和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);
我使用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()，但它们只显示值而不显示键。更多信息请参见链接。
在某些情况下，使用:
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);
这不是一个非常聪明的代码，但它是有效的……
希望对大家有帮助。
下面是一个将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
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::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>
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。
我希望这能有所帮助。
简短的回答
[...fd] // shortest devtool solution
Array.from(fd) // Same as above
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
再回答
其他人建议记录fd.entries()的每个条目，但是console.log也可以接受多个参数。要获取任意数量的参数，可以使用apply方法并像这样调用它:console.log。应用(控制台、数组)。 但是ES6有一种新的方法来应用扩展操作符和iteratorconsole.log(…array)参数。
知道这一点，事实上，FormData和数组都有一个符号。迭代器方法，该方法指定了…的循环，然后你可以用…展开参数iterable而不必去调用formData.entries()方法(因为这是默认函数)，你可以只做(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) // Only shows up in devtool (not here in this code snippet) console.table([...fd]) // Don't work in IE (use last pair if same key is used more) console.log(Object.fromEntries(fd))
如果你想检查原始的主体看起来像什么，然后你可以使用响应构造函数(获取API的一部分)，这将转换你的表单数据，它实际上看起来像当你上传表单数据
var fd = new FormData() fd。追加(“key1”、“value1”) fd。追加(“key2”、“value2”) 新的响应(fd)。text () (console.log)
角
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)时，我尝试了上面的方法，除了静态检查错误外，它可以正常工作，但(var pair of formData.entries())也不能正常工作。
新格式(); formData。append(’key1’,’value1’); formData。append(’key2’,’value2’); 初始化。 游戏机。log (key +”“+价值) ');
去斯塔克布利茨看看
ES6 +方案:
要查看表单数据的结构:
console.log([...formData])
要查看每个键-值对:
for (let [key, value] of formData.entries()) {
console.log(`${key}: ${value}`);
}
在angular 7中，我使用下面这行代码在控制台获得了条目。
formData.forEach(entries => console.log(entries));
试试这个函数:
function formDataToObject(formData) {
return Array.from(formData.entries()).reduce((old, pair) => ({
...old,
[pair[0]]: pair[1],
}), {});
}
已经回答了，但是如果你想以一种简单的方式从提交的表单中检索值，你可以使用扩展操作符并创建一个新的Map iterable来获得一个不错的结构。
新地图([…新FormData(形式)])
在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
简单的方法
我在angular 8中使用了这段代码
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
formData.forEach((value,key) => {
console.log(key+value)
});
将它映射到一个对象，像这样:
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...of
console.log(myformdata.get("mykey");
我认为这就是答案! 你可以像这样使用"getall"
console.log(myformdata.getall());
表单数据
var formData = new formData ();//当前为空 formData。追加(“用户名”,“克里斯”); for (formData.keys()的var键){ console.log(关键); ｝ forformdata .values()的变量值{ console.log(价值); ｝
知道更多
如果你正在使用typescript，那么你可以像这样控制FormData:
const productData = new FormData();
productData.append('name', name);
productData.append('description', description);
productData.forEach((key,value)=>{
console.log(key, value)})
formData.entries()在最新版本中抛出错误。 所以你可以试试下面的方法:
formData.forEach((value: FormDataEntryValue, key: string) => {
console.log(value, key);
})
