用戶單擊提交后，如何在我的注冊頁面上顯示“已確認”消息？

Question

我有一個 nodejs 服務器，並在 html 中創建了一個注冊頁面。 單擊提交按鈕時，我創建的服務器接收輸入並檢查值。

如果用戶已添加到數據庫中，我希望注冊頁面發回一條新消息，說明“已添加用戶”。

現在我使用“res.sendFile()”並再次發送頁面，但我想這樣做加上一個新的消息元素。

這是服務器中javascript代碼的一部分：

    console.log(req.body);

    const { email, username, password, passwordConfirm } = req.body;

    db.query("SELECT email FROM playerinfo where email = ?", [email], (error, results) => {
        if (error) console.log(error);

        if (results.length > 0) {
            return res.sendFile(path.join(__dirname, '../client/register.html'), );
        }


        db.query("INSERT INTO playerinfo VALUES ?", 
{ username: username, password: password, email: email }, (error, results) => {
            if (error) console.log(error);
            else {
                console.log(results);

                return res.sendFile(path.join(__dirname, '../client/register.html'));
            }
        });
    });
}

這是注冊頁面的 HTML ：

<!DOCTYPE html>

<head>
    <title>Create an account</title>
    <link rel="stylesheet" href="style/menustyle.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>

<body>

    <nav>
        <h3>User Login Test</h3>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/login">Log in</a></li>
            <li><a href="/register">Register</a></li>
        </ul>
    </nav>

    <div id='register-box' class="card" style="width: 18rem;">
        <h3 class="card-title">Register</h3>
        <div class="card-body">
            <form action="/auth/register" method="POST">
                <div class="mb-3">
                    <label for="player-email" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="player-email" aria-describedby="emailHelp"
                        name='email'>
                </div>
                <div class="mb-3">
                    <label for="player-username" class="form-label">Username</label>
                    <input type="text" class="form-control" id="player-username" name='username'>
                </div>
                <div class="mb-3">
                    <label for="player-password" class="form-label">Password</label>
                    <input type="password" class="form-control" id="player-password" name='password'>
                </div>
                <div class="mb-3">
                    <label for="player-password-confirm" class="form-label">Confirm Password</label>
                    <input type="password" class="form-control" id="player-password-confirm" name='passwordConfirm'>
                </div>
                

                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</body>

</html>

Answer 1

你為什么要那樣做？ 是要求還是您的決定？ 我認為你有幾種方法可以做到這一點。

您可以從客戶端使用 ajax 並從服務器獲取 json 響應。 這樣，您將在注冊 web 時獲得更好的體驗，並且避免重新加載所有頁面並再次發回頁面。
如果您需要重新加載所有頁面並從服務器再次發回，您可以使用一些模板管理器（如 mustache）並在發送之前解析 html 內容，或者干脆有兩個不同的 html。 無論如何，我認為這不是一個好主意。

用戶單擊提交后，如何在我的注冊頁面上顯示“已確認”消息？

問題描述

1 個解決方案

解決方案1
0 已采納 2021-04-15 21:16:30

用戶單擊提交后，如何在我的注冊頁面上顯示“已確認”消息？

問題描述

1 個解決方案

解決方案1 0 已采納 2021-04-15 21:16:30

解決方案1
0 已采納 2021-04-15 21:16:30