时间戳

首页 > 解决方案 > 尝试使用 JavaScript 将 HTML 表单数据发送到 API

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

问题描述

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

我可以成功发布并从 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)
});

标签： javascripthtmlformsapipost

解决方案

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

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

推荐阅读