使用 FormData 发送 XMLHttpRequest

我正在尝试使用 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为了获得与第一张图片所示相同的结果？

你错过了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);

EDIT

FormData一般用于发送二进制数据，会自动设置Content-Type标头至multipart/form-data (see 表单数据规范 https://developer.mozilla.org/en-US/docs/Web/API/FormData and 表单数据示例 https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects）。但是，您必须确保服务器也接受使用此 MIME 类型的请求，这显然不是您的情况，因为您已经尝试过但它不起作用。