javascript 使用 FormData 发送 XMLHttpRequest
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25695778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sending XMLHttpRequest with FormData
提问by Marco Bonelli
I am trying to make an XHR with JavaScript, but I can't get it to work correctly.
我正在尝试使用 JavaScript 制作 XHR，但无法使其正常工作。
When I see the right requests in the "Network" tab of the Chrome developer tools I see that they have a "Form Data" sectionwhere are listed all the informations sent with the request, like this:
当我在 Chrome 开发人员工具的“网络”选项卡中看到正确的请求时，我看到它们有一个“表单数据”部分，其中列出了与请求一起发送的所有信息，如下所示：
Now, I've tried making my XMLHttpRequestin any way I know, but I can't get that result.
现在，我已经尝试XMLHttpRequest以我知道的任何方式制作我的作品，但我无法得到那个结果。
I have tried this:
我试过这个：
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();
But I got this "Query String Parameters" instead of "Form Data":
但是我得到了这个“查询字符串参数”而不是“表单数据”：
I have also tried this:
我也试过这个：
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);
But I got this "Request Payload" instead of "Form Data":
但是我得到了这个“请求有效负载”而不是“表单数据”：
And, finally, I have tried this:
最后，我试过这个：
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));
But I got another "Request Payload" instead of "Form Data":
但是我得到了另一个“请求有效负载”而不是“表单数据”：
NOW, my question is:
现在，我的问题是：
How can I send my XMLHttpRequestin order to obtain the same result as shown in the FIRST image?
我如何发送我XMLHttpRequest的以获得与第一个图像中显示的结果相同的结果？
回答by Matteo Bernardini
You're missing the Content-Typeheader to specify that your data is form-like encoded.
您缺少Content-Type标头来指定您的数据是类似表单的编码。
This will work:
这将起作用：
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
编辑
FormDatais generally used to send binary data and will automatically set the Content-Typeheader to multipart/form-data(see FormData Specand FormData Examples). However you have to make sure the server also accepts request using this MIME-type, which apparently is not your case, as you already tried and it didn't work.
FormData通常用于发送二进制数据并将自动设置Content-Type标头multipart/form-data（参见FormData Spec和FormData 示例）。但是，您必须确保服务器也接受使用此 MIME 类型的请求，这显然不是您的情况，因为您已经尝试过但没有奏效。
回答by Paul S.
Posting this as an answer because I believe it will give you exactly what you want to know;
将此作为答案发布，因为我相信它会为您提供您想知道的确切信息；
I just want to know what sort of method is used to send that kind of data. I can assure you that the first image is obtained using an XHR
我只想知道用什么样的方法来发送那种数据。我可以向您保证，第一张图像是使用 XHR 获得的
You haven't given enough information for us to see how the "correct" version is generated, but you can capture the relevant bits you want, drop in code like this beforethe working XMLHttpRequestis .opened;
您还没有给予足够的信息，让我们来看看如何产生“正确”的版本，但你可以捕捉你想要的，在代码下降这样的相关位之前工作的XMLHttpRequest被.open编;
(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']));
Now perform the action to make it fire and the relevant parameters will be logged so you can see exactly what happens to it as it is set up and sent, which should allow you to know what to pass into your one.
现在执行操作使其触发，相关参数将被记录下来，这样您就可以准确地看到它在设置和发送时发生了什么，这应该让您知道要传递给您的参数。
The problem is that I get a forbidden (403)
问题是我得到了一个禁止 (403)
I'm going to assume this is not a same origin security-error because this looks server-returned and not a browser-initiated abort
我将假设这不是同源安全错误，因为这看起来是服务器返回的，而不是浏览器启动的中止
