尝试使用 JavaScript 将 HTML 表单数据发送到 API

Question

正如标题所说，我正在尝试通过 HTML 表单捕获用户的输入，并在提交时将他们的数据发布到 API。

---

我可以成功 POST 并从 API 获得响应，但是我的表单数据都没有附加（至少我相信这是持续存在的问题）。

---

由于这是练习，我使用的是我在https://reqres.in/ 在线找到的免费帖子 API。 感谢所有帮助！

HTML

<form id="myForm">
    <label for="myName">Send me your name:</label>
    <input id="myName" name="name" value="Alex">
    <br>
    <label for="userId">your id:</label>
    <input id="userId" name="id" value="123">
    <br>
    <label for="myJob">your name:</label>
    <input id="myJob" name="job" value="Web Dev">
    <br>
    <input id="postSubmit" type="submit" value="Send Me!">
</form>

这是我的 JavaScript

const thisForm = document.getElementById('myForm');
thisForm.addEventListener('submit', async function (e) {
    e.preventDefault();
    let response = await fetch('https://reqres.in/api/users', {
        method: 'POST',
        body: new FormData(thisForm)
    });

    let result = await response.json();
    alert(result.message)
    console.log(result)
});

Answer 1

您的表单数据被附加到POST 请求中，但它是以reqres.in 忽略的格式附加的。似乎reqres.in 仅在请求正文是有效的 JSON 字符串时才处理它。

当您发送带有 fetch 且正文设置为 new FormData() 的请求时，您的浏览器会将 Content-Type: multipart/form-data 标头添加到请求中。 reqres.in 忽略多部分表单数据。 reqres.in API 应该以错误消息响应，通知您使用了 API 无法正确处理的 Content-Type，而不是忽略您提供的正文，创建记录并使用 201 created 响应。这绝对是他们的失败。

这是一个使用 Content-Type: application/json 的工作 sn-p。但请注意，这不是将 FormData 对象转换为相应 JSON 的可靠方法，而且 Object.fromEntries 仅在非常现代的浏览器中可用：

const thisForm = document.getElementById('myForm');
thisForm.addEventListener('submit', async function (e) {
    e.preventDefault();
    const formData = new FormData(thisForm).entries()
    const response = await fetch('https://reqres.in/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(Object.fromEntries(formData))
    });

    const result = await response.json();
    console.log(result)
});

<form id="myForm">
    <label for="myName">Send me your name:</label>
    <input id="myName" name="name" value="Alex">
    <br>
    <label for="userId">your id:</label>
    <input id="userId" name="id" value="123">
    <br>
    <label for="myJob">your name:</label>
    <input id="myJob" name="job" value="Web Dev">
    <br>
    <input id="postSubmit" type="submit" value="Send Me!">
</form>