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()函数将返回一个数组，其中包含表单中每个数据的name和value属性的对象。然后，您可以遍历该数组，并使用.append()实例上的formData函数将表单中的所有输入添加到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对象添加整个表单而不创建新对象

1 个答案: