当我记录时,从现有表单创建的FormData似乎是空的
mik*_*ana 40 javascript form-data
我正在尝试从Web表单中获取一组键(输入名称或类似名称)和值(输入值):
<body>
<form>
<input type="text" name="banana" value="swag">
</form>
<script>
var form = document.querySelector('form');
var formData = new FormData(form);
</script>
</body>
根据FormData文档,formData应该包含表单中的键和值.但console.log(formData)节目formData是空的.
如何使用FormData快速从表单中获取数据？
Far*_*ray 86
更新:XHR规范现在包含了几个用于检查FormData对象的函数.
自v39.0以来,FireFox已经支持更新的功能,Chrome计划在v50中获得支持.不确定其他浏览器.
var form = document.querySelector('form');
var formData = new FormData(form);
for (var [key, value] of formData.entries()) {
console.log(key, value);
}
//or
console.log(...formData)
- FormData 在开发者控制台中看起来像一个空对象。别被骗了！如果您运行“console.log(...formData)”而不是“console.log(formData)”，您应该会显示一些数据（只要您的输入字段都已命名）。 (19认同)
- @JoshPowlison 是绝对正确的。这就是这样做的方法。今天，“FormData”的创建者又惹恼了一个人。它应该很容易查看，而不是通过“for”循环或使用“console.log(...formData)”。 (4认同)
- 使用Typescript（^ 3.3.3333），formData.entries（）似乎不起作用。我不得不这样做：`formData.forEach（file => console.log（“ File：”，file））;` (3认同)
但
console.log(formData)节目formData是空的.
"空"是什么意思？当我在Chrome中测试它时,它会显示? FormData {append: function}...也就是说它是一个FormData对象,这正是我们所期望的.我做了一个小提琴并扩展到代码到这个:
var form = document.querySelector('form'),
formData = new FormData(form),
req = new XMLHttpRequest();
req.open("POST", "/echo/html/")
req.send(formData);
......这就是我在Chrome开发者工具网络面板中看到的内容:
所以代码按预期工作.
我认为这里的断开是你期望FormData像一个vanilla JavaScript对象或数组一样工作,让你直接查看和操作它的内容.不幸的是,它不像那样 - FormData在其公共API中只有一个方法,即append.几乎所有你能用它做的就是创建它,为它添加值,并将它传递给XMLHttpRequest.
如果您想以一种可以检查和操作的方式获取表单值,则必须采用传统方式:通过迭代输入元素并逐个获取每个值 - 或者使用由其他人编写的函数,例如jQuery.这是一个SO线程,其中包含一些方法:如何使用JavaScript/jQuery获取表单数据？
- 是的,我没有想到,并且不要指望你能够修复标准,对不起,如果你觉得我有.我只是在评论实施缺乏实用性."web API"中的几乎所有内容在记录时都会产生可用的结果,这很突出,因为它没有.很明显,目前的情况非常糟糕,无论是浏览器制造商还是WHATWG修复,都可能是其他地方最好的讨论.感谢您的回答. (2认同)
我也遇到了同样的问题.我无法在控制台上看到.您需要将以下内容添加到ajax请求中,以便发送数据
processData: false, contentType: false
根据FormData上的 MDN文档
实现FormData的对象可以直接用于for ... of结构，而不是entry（）：for（myFormData的var p）等同于for（myFormData.entries（）的var p。
遍历FormData.entries（）对我不起作用。
这是我要检查formData是否为空的操作：
var isFormDataEmpty= true;
for (var p of formData) {
isFormDataEmpty= false;
break;
}
由于遍历formData会为您提供上载的文件，因此您可以使用它来获取文件名，文件类型验证等。
| 归档时间： |
|
| 查看次数： |
56700 次 |
| 最近记录： |