Javascript：获取所有表单键和值并将它们组合为 javascript 对象以与 XHR 2 FormData 一起使用

Question

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

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

但是，如果我打算将其与 XHR 2 的 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);
}