如何检查FormData？
我已经试过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对象中获取数据。 您只能使用它们来构buildFormData通过AJAX请求发送。
我也刚刚发现这个问题，说明了同样的事情： FormData.append（“key”，“value”）不起作用 。
解决这个问题的一个方法是build立一个常规字典，然后将其转换为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]); }
如果你想debugging一个简单的FormData对象，你也可以发送它来检查它在networking请求控制台：
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(){...
是不可能的。
我用这个代码replace了：
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);
这不是一个非常聪明的代码，但它的工作原理…
希望这是帮助。
如果你想检查什么样的原体，你可以使用Response构造函数 （获取API的一部分）
var fd = new FormData fd.append("key1", "value1") fd.append("key2", "value2") new Response(fd).text().then(console.log)
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对象的条目作为对象logging到控制台的function。
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); };
MDN文件在.entries()
MDN doc上.next()和.done
你必须明白， FormData::entries()返回一个Iterator的实例。
以这个例子的forms：
<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>
尝试这个 ：：
let formdata = new formData() formdata.append('name', 'Alex Johnson') for(let i of formdata){ console.log(i) }
