FormData 对象添加整个表单而不创建新对象答案

【问题标题】：FormData object add entire form without creating new objectFormData 对象添加整个表单而不创建新对象
【发布时间】：2015-12-01 18:49:33
【问题描述】：

我有一个提交代码如下：

$(document).on("submit","form",function(event){
  event.preventDefault()
  formData=new FormData(this)
})

但有时我在提交之前完成了以下操作

formData=new FormData()    
formData.append("test",1)

因此，调用新的 FormData 对象会删除附加的数据。如何在不创建新对象的情况下附加整个表单？像这样的：

$(document).on("submit","form",function(event){
  event.preventDefault()
  FormData.append(this) // not new just appended entire form
})

【问题讨论】：

标签： jquery form-data

【解决方案1】：

我假设您的 formData 变量是在您的 .on("submit", "form", ...) 函数之外声明的。

您可以在表单上使用 jquery 的 serializeArray()。 serializeArray() 函数将返回一个数组，其中包含一个对象，该对象对于表单中的每条数据都具有name 和value 属性。然后，您可以遍历该数组并使用 formData 实例上的 .append() 函数将表单中的所有输入添加到 formData。

请注意，您需要在表单中的每个元素上都有一个name 属性才能正常工作。请参阅下面的工作示例，它将在将每个表单项添加到 formData 实例之前将其记录到浏览器控制台。

var formData = new FormData();
formData.append("test", 1);

$(document).on("submit", "form", function(event) {
  event.preventDefault();
  var formDataArray = $(this).serializeArray();
  for(var i = 0; i < formDataArray.length; i++){
    var formDataItem = formDataArray[i];
    console.log(formDataItem);
    formData.append(formDataItem.name, formDataItem.value);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"/>
  <label for="age">Age:</label>
  <input type="number" id="age" name="age"/>
  <button type="submit">Submit</button>
</form>

【讨论】：