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

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 中的控制台。任何问题都应该在那里可见。
更一般地说，您似乎是在用 vanilla JavaScript 编写前端。如今，使用 React、Vue、Angular 或 Svelte 等框架编写前端很常见；香草 JS 越来越不常见。为了进一步学习，也可以看看这些框架。

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

best practise to send form information to server

javascript

forms

post

fetch