将表单信息发送到服务器的最佳实践

Question

我很难深入了解 POST 方法 - 我的老师设置了一个服务器，但它似乎不接受我发送的数据。以下是用文本类型发送我的 2 个输入的可接受方式吗？还是有另一种标准化的方法？

为了示例，我的输入字段将是名字和姓氏。没什么疯狂的。

document.getElementById("myForm").addEventListener("submit", async (e) => {
    e.preventDefault();

    await fetch("http://localhost:3000/course/add", {
        method: "POST",
        headers: {
            "Content-Type": "multipart/form-data",
        },
        body: new FormData(e.target),
    })
        .then((confirm) => confirm.json())
        .catch((err) => err)
        .then(
            (response) =>
                (document.getElementById("container").innerHTML = response.message)
        );
});

Answer 1

如果不了解 API 实现，很难说它为什么不起作用。一些调试提示：

• 在 F12 中检查您的网络选项卡。请求是否触发（如果没有，问题可能与元素选择器或事件侦听器有关）？它是挂起（可能是数据输入、路由或内部行为的服务器端问题）还是生成响应（如果是，是什么响应）？ POST 响应代码和正文是什么？
• 检查您似乎在本地运行的 API。您应该期望您的老师构建了（至少是一些基本的）登录到服务器，因此任何错误都必须在那里可见。
• 同时检查 F12 中的控制台。任何问题都应该在那里可见。
• 更一般地说，您似乎是在用原生 JavaScript 编写前端。今天，使用 React、Vue、Angular 或 Svelte 等框架编写前端很常见； vanilla JS 越来越少见了。为了进一步学习，看看这些框架也是值得的。