JavaScript Fetch（）正文未正确发布

Question

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

我有以下JavaScript对象：

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

我正在尝试向网址POST发出'/user/login'个请求。

以下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下。这个问题是，它与我已编写的后端代码无法匹配。

如何将JavaScript对象发布到Fetch()的网址，就像jQuery $.post()一样？

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);