JavaScript Fetch() 主体未正确发布

Question

我正在尝试使用 JavaScript 向我网站上的 URL 发出 POST 请求。 我之前使用的是 jQuery 的 $.post()函数按原样正确发送数据对象，但在尝试切换到内置 Fetch() 时方法，我正在努力以与 jQuery 方法相同的形式发送数据。

我有以下 JavaScript 对象:

let requestBody = {
    username: document.getElementById('username').value,
    password: document.getElementById('password').value,
}

并且我正在尝试向 URL '/user/login' 发出 POST 请求。

以下 jQuery 方法有效:

$.post('/user/login', requestBody);

但是当尝试使用 Fetch 方法时:

fetch(new Request('/user/login'), { method: 'POST', body: requestBody })

我在 Chrome 开发者工具中没有看到任何表单主体。 如果我尝试对 requestBody 对象进行字符串化:

fetch(new Request('/user/login'), { method: 'POST', body: JSON.stringify(requestBody) })

您可以看到我在 Form Data 下没有任何数据，就像我在 jQuery 中所做的那样，而是在 Request Payload 下。这样做的问题是，它与我已经编写的后端代码不兼容。

如何像 jQuery $.post() 那样使用 Fetch() 将 JavaScript 对象发布到 URL？

Answer 1

您需要的是使用 FormData 而不是 JSON 表示

here is how to do it ，基本上看起来像这样:

var formData = new FormData();
formData.append("username", document.getElementById('username').value);
formData.append("password", document.getElementById('password').value);