使用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(),
    formData = new FormData();

formData.append("data[tumblelog]", "drunknight");
formData.append("data[source]", "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(formData);

或者如果您不想使用FormData

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);

Answer 2

将此作为答案发布，因为我相信它会为您提供您想要知道的内容;

  

我只是想知道用什么方法发送那种数据。我可以向您保证，第一张图像是使用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）

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