当我记录它时，从现有表单创建的 FormData 似乎是空的[重复]
Posted
技术标签:
【中文标题】当我记录它时，从现有表单创建的 FormData 似乎是空的[重复]【英文标题】：FormData created from an existing form seems empty when I log it [duplicate] 【发布时间】：2014-09-22 07:27:31 【问题描述】：我正在尝试从 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 documentation，formData 应该包含表单中的键和值。但是console.log(formData) 显示formData 是空的。
如何使用 FormData 从表单中快速获取数据？
JSFiddle
【问题讨论】：
【参考方案1】：我也遇到了同样的问题。我无法在控制台上看到。您需要在ajax请求中添加以下内容，以便发送数据
processData: false, contentType: false
【讨论】：
【参考方案2】：根据 FormData 上的 MDN 文档
实现
FormData的对象可以直接在for...of结构中使用，而不是entries(): for (var p of myFormData)等价于for (var p of myFormData.entries())。
迭代 FormData.entries() 对我不起作用。
这是我检查formData 是否为空的方法：
var isFormDataEmpty= true;
for (var p of formData)
isFormDataEmpty= false;
break;
由于迭代formData 为您提供上传的文件，您可以使用它来获取文件名、文件类型验证等。
【讨论】：
for (var x of formData) console.log(x); 按照 OP 的要求进行操作
@Auspex 正确。我提到了我用来检查表单数据是否为空的内容，从而跑题了。
不是真正的批评；我非常感谢完整的解释。但是您可能会添加一个衬里来实际回答问题:-)【参考方案3】：
更新：the XHR spec 现在包含更多用于检查 FormData 对象的函数。
FireFox has supported the newer functions since v39.0，Chrome is slated to get support in 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)
【讨论】：
使用 Typescript (^3.3.3333)，formData.entries() 似乎不起作用。我不得不这样做：formData.forEach(file => console.log("File: ", file));
有效！谢谢
呃。我花了整个下午的时间试图弄清楚为什么我的 FormData 是空的……而事实并非如此！
FormData 在开发者控制台中看起来像一个空对象。不要被愚弄了！如果你运行 console.log(...formData) 而不是 console.log(formData) 你应该得到一些数据显示（只要你的输入字段都被命名）。
@JoshPowlison 是绝对正确的。这就是这样做的方法。 FormData 的创建者今天又惹恼了一个人。它应该很容易看到，而不是通过for 循环或使用console.log(...formData)。【参考方案4】：
但是
console.log(formData)显示formData是空的。
“空”是什么意思？当我在 Chrome 中测试它时，它显示 ‣ FormData append: function ... 也就是说它是一个 FormData 对象，这是我们所期望的。我做了一个小提琴和expanded to code to this：
var form = document.querySelector('form'),
formData = new FormData(form),
req = new XMLHttpRequest();
req.open("POST", "/echo/html/")
req.send(formData);
...这就是我在 Chrome 开发者工具网络面板中看到的内容：
所以代码按预期工作。
我认为这里的脱节在于您期望 FormData 像普通的 javascript 对象或数组一样工作，并让您直接查看和操作其内容。不幸的是，它不是那样工作的——FormData 在its public API 中只有一个方法，即append。几乎所有你能做的就是创建它，向它附加值，然后将它传递给 XMLHttpRequest。
如果您想以一种可以检查和操作的方式获取表单值，则必须采用老式方式：遍历输入元素并一个接一个地获取每个值——或者通过使用其他人编写的函数，例如jQuery的。这是一个带有几种方法的 SO 线程：How can I get form data with JavaScript/jQuery?
【讨论】：
> “空”是什么意思？我的意思是 formData 没有可枚举的键。 它不应该有任何可枚举的键。这不是其规范的一部分。这并不意味着它是“空的”——正如我的示例所示，预期的数据在那里——它只是意味着它不可枚举。 谢谢 - 我知道 FormData 正在存储表单数据，而且它的toString() 方法（由 console.log() 使用）是无用的。我不认为这是设计 - 它似乎与 Web API 的其他部分非常不一致。
我认为 FormData 旨在做一件非常具体的事情（规范肯定是doesn't mention any additional functionality），它的实现只做那件事。规范的未来修订版完全有可能添加使其对其他事物更有用的方法，但如果您想要一个具有可枚举键的对象，您将不得不在其他地方寻找。
是的，我没有预料到，也不指望你能修复标准，如果你觉得我有，对不起。我只是在评论该实施缺乏实用性。 'web API' 中的几乎所有内容在记录时都会产生可用的结果，这很突出，因为它没有。很明显，目前的情况相当糟糕，无论是浏览器制造商还是要修复的 WHATWG 可能最好在其他地方讨论。感谢您的回答。以上是关于当我记录它时，从现有表单创建的 FormData 似乎是空的[重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何在Access中使用子表单时编辑现有记录而不创建新记录？
从javascript函数创建的表单提交FormData到php