将 FormData 对象与 XMLHttpRequest 一起使用答案

【问题标题】：Using FormData object with XMLHttpRequest将 FormData 对象与 XMLHttpRequest 一起使用
【发布时间】：2016-12-05 12:03:43
【问题描述】：

我正在尝试使用 FormData 对象和 XMLHttpRequest 发送 POST 数据。据我了解这篇文章 - https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects - 我应该以与从表单提交操作接收时相同的方式接收数据 - 所以我希望在我的 PHP 端填充所有已发布参数的 $_POST 数组。不幸的是，我收到了在一个字符串元素中编码的所有数据：

"------WebKitFormBoundaryVOjgiuQUbsbzfzGz\r\nContent-Disposition:_form-data;_name" => "\"par1\"\r\n\r\ntest\r\n------WebKitFormBoundaryVOjgiuQUbsbzfzGz\r\nContent-Disposition: form-data; name=\"par2\"\r\n\r\ntest2\r\n------WebKitFormBoundaryVOjgiuQUbsbzfzGz--\r\n"

我的 JS 代码就这么简单：

var fd = new FormData;
fd.append("par1", "test");
fd.append("par2", "test2");

req.open('POST', url);

req.send(fd);

我在做什么？还是我对 FormData 对象的理解有误？

【问题讨论】：

你能看看this看看有没有帮助
谢谢，这正是我所期望的——我的例子中的 par1 和 par2 应该是 $_POST 数组的元素。不幸的是，我的 $_POST 只有一个元素 - "-----WebKitFormBoundaryVOjgiuQUbsbzfzGz\r\nContent-Disposition:_form-data;_name" - 我不知道是什么原因造成的。

标签： ajax xmlhttprequest form-data

【解决方案1】：

我遇到了类似的问题——我发送表单数据的 API 无法识别 FormData 对象中的数据。我最终使用 formData.entries() 来填充我自己的请求正文。

async function submitContactForm(event) {
  event.preventDefault();
  let form = document.querySelector("form");
  let formData = new FormData(form);
  let reqBody = {};
  for (let pair of formData.entries()) {
    reqBody[pair[0]] = pair[1];
  }
  console.log(JSON.stringify(formData));
  let response = await fetch(
    "<myUrl>",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=utf-8"
      },
      body: JSON.stringify(reqBody)
    }
  );
  let body = await response.json();
  console.log(body);
}

这看起来很老套，但我不知道为什么我的 API 无法识别我发送的 FormData 实例。

【讨论】：

【解决方案2】：

FormData 与 XMLHttpRequest 一起使用真的很容易。看这个例子：

document.querySelector("form").addEventListener("submit", function (event) {
    event.preventDefault();

    var ajax = new XMLHttpRequest();

    // ...

    ajax.open("post", this.action, true);

    ajax.send(new FormData(this));

});

JSFiddle 中的完整示例。

【讨论】：