为什么 FormData 对象没有通过 fetch() 发送？

Question

const userAPI = "https://reqres.in/api/users"

$("#myForm").on("submit", function(e) { 
    e.preventDefault();

    const formData = new FormData(this);

    // console.log(formData.get("inp_username"))

    fetch(userAPI, { 
        method: "POST",
        body: formData
    }).then((res) => { 
        return res.json();
    }).then(val=> console.log(val))
    .catch(err => console.log(err))

})

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<form class="form" id="myForm">
    <label for="inp_username">Username</label>
    <input type="text" id="inp_username" name="inp_username">
    <label for="inp_password">Password</label>
    <input type="text" id="inp_password" name="inp_password">
    <button type="submit">Login</button>
</form>

由于某种原因它不起作用。

FormData

未发送。看来来自

form

的数据实际上存储在对象内部，因为我可以使用

get()

对其进行控制台，并且该值在那里，但没有被发送。返回的值应该与我发送的用户名和密码相同，但我没有取回它。

如果我使用

URLSearchParams

，它可以工作，但单独使用

FormData

则不起作用。

我尝试将

Content-Type

更改为

application/x-www-form-urlencoded

，当我这样做时，我得到一个奇怪的响应，其中包括发送的数据，但它也包括一大堆我不明白的乱码，不应该在那里。我应该使用我发送的数据获取一个简单的 JSON 对象。

如果我尝试附加数据，它也不起作用。

我做错了什么，还是我不理解

FormData

的工作方式？

编辑

只是为了让自己清楚。服务器的响应必须与您输入的用户名和密码以及 ID 和凭据相同。

尝试用查询字符串而不是 FormData 替换正文，您将看到应该得到的响应。

示例：

 headers: {"Content-Type": "application/x-www-form-urlencoded"},
 body: "name=Donald"

响应将是：

{name: "Donald", id: "694", createdAt: "2021-06-27T12:41:47.798Z"}

Answer 1

您应该像下面这样转换

formData

：

body: JSON.stringify(Object.fromEntries(formData))

它会起作用的。