使用 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(),
    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 示例）。 但是，您必須確保服務器也接受使用此 MIME 類型的請求，這顯然不是您的情況，因為您已經嘗試過但沒有奏效。

Answer 2

我注意到 OP 嘗試在他們的一次迭代中使用 FormData 來解決原始問題。

我最近開始使用 Fetch api 發送表單數據。 它的設計承諾使其真正易於使用（特別是如果有一種形式可用於所有輸入）：

var form = document.forms[0];
var data = new FormData(form);
fetch(form.action, { method: form.method, body: data })
.then((response) => {
  // handle response
}).catch((error) => {
  // handle error
);

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

Answer 3

將此作為答案發布，因為我相信它會為您提供您想知道的確切信息；

我只想知道用什么樣的方法來發送那種數據。 我可以向您保證，第一張圖像是使用 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)

我將假設這不是同源安全錯誤，因為這看起來是服務器返回的，而不是瀏覽器啟動的中止