Javascript 从现有表单创建的FormData在我登录时看起来是空的_Javascript_Form Data

Javascript 从现有表单创建的FormData在我登录时看起来是空的

javascript

Javascript 从现有表单创建的FormData在我登录时看起来是空的,javascript,form-data,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); </scr

我试图从web表单中获取一组键（输入名称或类似名称）和值（输入值）：

<body>
  <form>
    <input type="text" name="banana" value="swag">
  </form>

  <script>
    var form = document.querySelector('form');
    var formData = new FormData(form);
  </script>
</body>


var form=document.querySelector（'form'）；
var formData=新formData（表格）；

根据，

formData

应该包含表单中的键和值。但是

console.log（formData）

显示

formData

为空

如何使用FormData快速从表单中获取数据

但是

console.log（formData）

显示

formData

为空

你说的“空”是什么意思？当我在Chrome中测试它时，它显示

——FormData{append:function}

。。。也就是说它是一个FormData对象，这正是我们所期望的。我拉了把小提琴，然后：

…这就是我在Chrome开发者工具网络面板中看到的：

因此，代码按预期工作

我认为这里的分歧在于，您希望FormData像普通JavaScript对象或数组一样工作，让您直接查看和操作其内容。不幸的是，它不像FormData中只有一个方法那样工作，即

append

。使用它所能做的几乎就是创建它，向它附加值，然后将它传递给XMLHttpRequest

如果您想以一种可以检查和操作的方式获取表单值，那么必须采用老式的方法：通过迭代输入元素并逐个获取每个值，或者使用其他人编写的函数，例如jQuery。这里有一个有几种方法的SO线程：

我也面临同样的问题。我在控制台上看不见。您需要将以下内容添加到ajax请求中，以便发送数据

processData: false, contentType: false

更新：现在包括多个用于检查FormData对象的函数

。不确定其他浏览器

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

的对象可以直接用于

for…of

结构，而不是

entries（）：for（myFormData的var p）

相当于

for（myFormData.entries的var p（））

迭代

FormData.entries（）

对我来说不起作用

下面是检查

formData

是否为空的步骤：

var isFormDataEmpty= true;
for (var p of formData) {
   isFormDataEmpty= false;
   break;
}

由于迭代

formData

会得到上载的文件，因此您可以使用它来获取文件名、文件类型验证等。

>您所说的“空”是什么意思？我的意思是formData没有可枚举键。它不应该有任何可枚举键。这不是它规范的一部分。这并不意味着它是“空的”-正如我的示例所示，预期的数据在那里-它只是意味着它不可枚举。谢谢-我知道FormData正在存储表单数据，而且它的

toString（）

方法（由

console.log（）

使用）是无用的。但我不认为这是一种设计——它似乎与web API的其他部分非常不一致。我认为FormData的设计目的是做一件非常具体的事情（当然是规范），而它的实现只做这件事。该规范的未来修订版完全可能会添加一些方法，使其在其他方面更加有用，但如果您想要一个具有可枚举键的对象，很遗憾，您必须到其他地方查找。是的，我没有预料到，也不期望您能够修复该标准，如果您觉得我有，很抱歉。我只是在评论实现的实用性不足。“web API”中的几乎所有内容在记录时都会产生可用的结果，这一点很突出，因为它没有。很明显，目前的情况相当糟糕，无论是在浏览器制造商身上，还是要解决什么问题，最好在别处讨论。谢谢你的回答。不要为回答一个老问题而感到难过！我已将其更改为公认的答案（尤其是在大多数浏览器都是Evernive的情况下），并添加了一些示例代码。它不是

console.log（formData）

，但至少我们最终可以看到里面的内容。使用Typescript（^3.3.3333），formData.entries（）似乎不起作用。我不得不这样做：

formData.forEach（file=>console.log（“file:，file））它工作！谢谢你。我整个下午都在想为什么我的FormData是空的。。。事实并非如此<代码>for（formData的变量x）console.log（x）做什么操作asked@Auspex对的我离题了，提到了我用来检查表单数据是否为空的内容；我真的很感激你的完整解释。但你可以加上一句话来回答这个问题：-）
var isFormDataEmpty= true;
for (var p of formData) {
   isFormDataEmpty= false;
   break;
}