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

Question

我有一个提交代码如下：

$(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
})

Answer 1

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

您可以在表单上使用 jquery 的 serializeArray()。 serializeArray() 函数将 return 一个数组，其中包含一个对象，该对象具有 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>

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

FormData object add entire form without creating new object

jquery

form-data