Question

我正在尝试从网络表单中获取一组键（输入名称或类似名称）和值（输入值）：

<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

Answer 1

更新：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);
}

Answer 2

但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开发者工具网络面板中看到的内容：

HTTP request

所以代码按预期工作。

我认为这里的断开是你期望FormData像一个vanilla JavaScript对象或数组一样工作，让你直接查看和操作它的内容。不幸的是，它不像那样 - FormData在its public API中只有一个方法，即append。几乎所有你能做的就是创建它，为它添加值，并将它传递给XMLHttpRequest。

如果您想以一种可以检查和操作的方式获取表单值，则必须采用传统方式：通过迭代输入元素并逐个获取每个值 - 或者通过使用其他人编写的功能，例如jQuery的。这是一个SO线程，其中包含一些方法：How can I get form data with JavaScript/jQuery?

Answer 3

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

processData: false, contentType: false

Answer 4

根据FormData

上的MDN文档

实现FormData的对象可以直接用于for ... of结构，而不是entry（）：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为您提供上传的文件，您可以使用它来获取文件名，文件类型验证等。

当我记录时，从现有表单创建的FormData似乎是空的

4 个答案: