Javascript:获取所有表单键和值，并将它们组合为Javascript对象，用于XHR2FormData

Question

我使用这个小片段来获取表单值：

myForm = document.forms[1];
email = myForm.elements['email']; 

然而，如果我计划将其与XHR2的FormData一起使用，我必须这样做：

function sendForm() {
  var formData = new FormData();
  formData.append('email', email);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };
  xhr.send(formData);
}

有什么方法可以将所有表单数据作为一个javascript对象来使用FormData吗？

Answer 1

只需将表单对象设置为FormData参数：

function sendForm() {
  var myForm = document.forms[1];
  var formData = new FormData(myForm);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };
  xhr.send(formData);
}

注意：它也适用于input type="file"

Answer 2

您可以做的是将所有信息存储在一个数组中并动态附加。

var myForm = document.forms[1];
var data = {};
data["email"] = myForm.elements["email"];
data["username"] = myForm.elements["username"];
data["password"] = myForm.elements["password"];
//  ... and so on...

现在，在您的发送中，您可以将数据作为参数传递并附加所有数据：

function sendForm(data) {
  var formData = new FormData();
  for(var i in data) {
    formData.append(i,data[i]);
  }
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };
  xhr.send(formData);
}