使用 FormData 发送 XMLHttpRequest

Question

我正在尝试使用 JavaScript 制作 XHR，但无法使其正常工作。

当我在 Chrome 开发人员工具的“网络”选项卡中看到正确的请求时，我看到它们有一个“表单数据”部分，其中列出了随请求发送的所有信息，如下所示：

现在，我已经尝试以任何我知道的方式制作我的XMLHttpRequest ，但我无法得到那个结果。

我试过这个：

var xhr = new XMLHttpRequest(),
    form_data = "data%5Btumblelog%5D=drunknight&data%5Bsource%5D=FOLLOW_SOURCE_REBLOG";
    // this is uri encoded: %5b = [ and %5D = ]

xhr.open('POST','https://www.somesite.com/page?' + form_data, false);
xhr.send();

但是我得到的是这个“查询字符串参数”而不是“表单数据”：

我也试过这个：

var xhr = new XMLHttpRequest(),
    formData = new FormData();

formData.append("data[tumblelog]", "drunknight");
formData.append("data[source]", "FOLLOW_SOURCE_REBLOG");
xhr.open('POST','https://www.somesite.com/page', false);
xhr.send(formData);

但是我得到的是这个“请求负载”而不是“表单数据”：

最后，我试过这个：

var xhr = new XMLHttpRequest(),
    formData = {
        "data[tumblelog]": "drunknight",
        "data[source]": "FOLLOW_SOURCE_REBLOG"
    };

xhr.open('POST','https://www.somesite.com/page', false);
xhr.send(JSON.stringify(formData));

但是我得到了另一个“请求负载”而不是“表单数据”：

---

现在，我的问题是：如何发送我的XMLHttpRequest以获得与第一张图片所示相同的结果？

Answer 1

您缺少Content-Type标头来指定您的数据是类似表单的编码。

这将起作用：

var xhr = new XMLHttpRequest(),
    data = "data%5Btumblelog%5D=drunknight&data%5Bsource%5D=FOLLOW_SOURCE_REBLOG";

xhr.open('POST','https://www.somesite.com/page', false);

// LINE ADDED
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.send(data);

编辑

FormData通常用于发送二进制数据，并且会自动将Content-Type标头设置为multipart/form-data （参见FormData Spec和FormData 示例）。 但是，您必须确保服务器也接受使用此 MIME 类型的请求，这显然不是您的情况，因为您已经尝试过但没有奏效。

Answer 2

我注意到 OP 尝试在他们的一次迭代中使用 FormData 来解决原始问题。

我最近开始使用 Fetch api 发送表单数据。 它的设计承诺使其真正易于使用（特别是如果有一种形式可用于所有输入）：

var form = document.forms[0];
var data = new FormData(form);
fetch(form.action, { method: form.method, body: data })
.then((response) => {
  // handle response
}).catch((error) => {
  // handle error
);

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

Answer 3

将此作为答案发布，因为我相信它会为您提供您想知道的确切信息；

我只想知道用什么样的方法来发送那种数据。 我可以向您保证，第一张图像是使用 XHR 获得的

您没有提供足够的信息让我们了解如何生成“正确”版本，但是您可以捕获所需的相关位，在工作XMLHttpRequest之前放入这样的代码.open ed;

(function (obj, methods) {
    var i;
    function log() {
        console.log.apply(console, arguments);
    }
    for (i = 0; i < methods.length; ++i)
        obj[methods[i]] = (function (method_name, method) {
            return function () {
                log.call(null, method_name, arguments);
                return method.apply(this, arguments);
            }
        }(methods[i], obj[methods[i]]));
}(XMLHttpRequest.prototype, ['open', 'send', 'setRequestHeader']));

现在执行操作使其触发，相关参数将被记录下来，这样您就可以确切地看到它在设置和发送时发生了什么，这应该让您知道要传递给您的参数。

---

问题是我得到了一个禁止 (403)

我将假设这不是同源安全错误，因为这看起来是服务器返回的，而不是浏览器启动的中止