javascript - 使用 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 header 来指定您的数据是类表单编码的。

这会起作用:

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 Examples )。但是，您必须确保服务器也接受使用此 MIME 类型的请求，这显然不是您的情况，因为您已经尝试过但没有成功。