使用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的信息以获得与FIRST图像中显示的相同的结果？

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

或者如果你不想使用 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);