如何在服务器端发生 post 后使用客户端 JavaScript 显示警报？

Question

我对服务器和节点 js 和 js 很陌生，但我正在尝试构建一个动态网页。在这个网页上，我有一个评论表，人们可以在其中发表评论。我的问题是，在服务器端，这个评论表单工作正常，但我正在尝试实现一些客户端 js，以便当他们提交表单时发生错误（例如，并非所有字段都已填写）或者如果没有发生错误警报出现在网页上，为这两种情况提供适当的消息。我还希望在按下提交按钮后清除表单，如果没有错误，详细信息已保存到服务器。目前在详细信息保存到服务器之前表单会重置，因此在服务器中保存的所有字段都是空白的，我收到此错误：

GET http://127.0.0.1:3000/comment 404 (Not Found)
handleFormSubmit    @   main.js:43

这是我的代码： Index.html

<html>
    <head>
    </head>
    <body>
        <h1>Comment!</h1>
            <form action='http://localhost:3000/comment' method='POST' id='CommentSection'>
                <div class='form-group'>
                    <label for='username'>username</label>
                    <input class='form-control' name='username'>
                </div>
                <div class='form-group'>
                    <label for='Title'>Info</label>
                    <input class='form-control' name='title' >
                </div>
                <div class='form-group'>
                    <label for='Comment'>Comment</label>
                    <input class='form-control' name='comment' >
                </div>
                <button type='submit' class='btn btn-primary'>Submit</button>
            </form>
        <script src='client.js'></script>
    </body>
</html>

server.js

let AllComments=[];
app.post('/comment', (req, res) => {
    const com = req.body;
    console.log(com);
    AllComments.push(com);
    res.status(201);
});

client.js

async function commentSubmit(event) {
    fetch('http://127.0.0.1:8090/comment');
    alert('success');
    CommentSection.reset();
}
const CommentSection = document.getElementById("CommentSection");
commentForm.addEventListener("submit", commentSubmit);

Answer 1

您需要向 handleFormSubmit 方法添加 .then() 方法调用，因此：

fetch('http://127.0.0.1:3000/comment').then(() => {
    alert('comment added');
})

fetch returns 一个 Promise，并且是一个 async 方法调用，所以在你的情况下， alert 在 fetch 调用已完成但不一定完成。一旦 Promise 被解析，.then() 方法就会被触发，所以为了在这种情况发生后运行编码，你将它存储在 .then() 方法中。

现在在您的特定用例中，您想要处理成功的调用和错误的调用。但还有另外一个考虑因素——您是否仅使用失败的调用来确定调用是否成功，或者服务器的响应是否表示错误？默认情况下，fetch 不会将响应转换为 json（假设您的数据从服务器返回为 json。为此，您需要执行以下操作（假设服务器 returns 也有 success/fail 响应：

fetch('http://127.0.0.1:3000/comment').then((res) => {
    return res.json();
}).then((res) => {
    if (res === 'success') {
        alert('comment added');
    } else {
        alert('An error has occurred when trying to add your comment');
    }
}).catch((e) => {
    alert('An error has occurred when trying to add your comment');

})

我最初错过的其他几点，但从评论线程中的对话来看：

由于您的 API 被服务器公开为 POST 请求，您需要向 fetch 请求添加其他选项，将方法更改为 POST ，以及添加要发送到服务器的数据。为此，您可以添加以下内容：

let options = {
    method: 'POST',
    headers: {
        "Content-Type": "application/json"
    },
    // where data is your form fields
    body: JSON.stringify(data)
}

// Replace '...' with code from above or whatever functionality you 
// need once Promise resolves
fetch('http://127.0.0.1:3000/comment', options).then(...)

有关 fetch 的更多信息，请查看 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

要获取表单数据值，如果没有太多，您可以对每个字段尝试此操作：let val = document.getElementById('someId').value

最后，您的表单当前设置的方式是，一旦您点击提交，它就会默认刷新。如果你想防止这种情况发生，在 fetch 调用之前，添加 event.preventDefault()，其中 event 是触发的 EventListener（你当前的方法签名应该足以这个）。

如何在服务器端发生 post 后使用客户端 JavaScript 显示警报？

How to display an alert using client-side JavaScript after a post has happened on the server side?

html

javascript

rest

client-server

node.js