如何使用车把和 Ajax 在不重新加载的情况下触发数据显示

Question

所以我有一个像这样的简单登录页面：

    <form class="form-container" method="post" action="/login">

      <div class="container">
        <label for="username"><b>Username</b></label>
        <input type="text" placeholder="Enter Username" name="username" required>

        <label for="password"><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="password" required>

        <div id="alertContainer" class="alert-container">{{data}}</div>
        <button type="submit">Login</button>
        <label>
          <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
      </div>
    </form>

请注意，alertContainer 是保留用于显示任何错误的 div。例如，如果没有找到用户名，我想在这里显示"Username not found"，因此handlebars语法{{data}}

我使用 express 的后端POST 请求如下所示：

app.post('/login', function(req, res) {
    var user = //find user in database;

    if(!user) {
        var data = "Username not found";
        // somehow get to page to display data
    }

    // do other things
});

问题是我只知道如何重新渲染页面以传递数据。但我只想显示一个简单的错误字符串alertContainer，而不刷新整个页面。当然，我可以在html 页面底部添加一些Ajax 脚本，但我不确定如何实现。

Answer 1

试试这个：

如果（！用户）{
document.getElementById("alertContainer").innerHTML = "找不到用户名";
}