尝试使用 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.inAPI应该显示错误信息，通知你，你已经使用了内容类型的API不正确处理，而不是不理你提供的身体，创造了记录，并与响应201 created。这绝对是他们的失败。

这是一个使用Content-Type: application/json. 但是请注意，这不是将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>