如何通过 xhr 或 fetch() 发送 FormData（POST）？

Question

我想将 jQuery 代码翻译成普通的 javascript。

我上面有这个 function。

$.post(
    "/product/getList",
    {
        id: id,
        product_id: product_id.value,
    }
).done(function(data) {
    console.log(data)
});

这将发送数据作为 FormData code=test&product=227

我试过 xhr

let xhr = new XMLHttpRequest();
xhr.open("POST", "/product/getList", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    id: id,
    product_id: product_id.value,
}));

xhr.onload = function() {
    let data = JSON.parse(this.responseText);
    console.log(data)
}

并获取

fetch("/product/getList", {
    method: "POST",
    headers: {'Content-Type': 'application/json'}, 
    body: JSON.stringify({
        id: id,
        product_id: product_id.value,
    })
}).then(response => {
    console.log(response)
});

但是这两个函数都将数据作为请求主体{"code":"s","product":"227"}

我如何通过xhr和fetch()发送 FormData？

- - - - - - - - - - - 更新： - - - - - - - - - - -

这是我使用 $.post() 时的 FormData

这是我的 FormData 使用

headers: {
  "Content-Type": "application/x-www-form-urlencoded",
},

const formData = new FormData();
formData.append("id", id);
formData.append("product_id", product_id);

并尝试 header

headers: {
  "Content-Type": "application/json",
},

Answer 1

您可以创建FormData object 并用您的道具填充它。

const formData = new FormData();
formData.append('id', id);
formData.append('product_id', product_id.value);

// and send it

xhr.send(formData);

// OR

fetch("/product/getList", {
    method: "POST",
    body: formData
})

但请记住formData.append(..)会再添加一个字段，即使它已经存在于formData中，因此您可以使用formData.set(..)来确保您的formData仅具有唯一字段。

您可以在developer.mozilla.org上找到一些文档