为何用户名重复检测的Alert提示无法正常显示？

我来帮你排查下问题所在，主要是异步请求的时序问题和事件处理的错误，一步步来修复：

问题分析 #

1. 表单提前提交：你的AJAX请求是异步的，点击提交按钮后，浏览器会立刻触发表单的默认提交行为（跳转到/register），而不等AJAX请求返回结果，所以alert根本没机会显示。
2. 阻止默认行为的方式错误：你在$.get的回调里写了data.preventDefault()，但data是后端返回的响应数据，不是事件对象，这个代码完全无效。
3. 冗余的事件绑定：表单本身设置了onsubmit="validateUsername()"，但你又给按钮绑定了click事件，两个事件会冲突，而且validateUsername函数根本没定义。
4. 可能缺少jQuery依赖：如果页面没引入jQuery库，$.get会直接报错，请求根本发不出去。

修复后的代码示例 #

1. 先确保引入jQuery（如果没加的话） #

在HTML的<head>里加上：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

2. 修改HTML表单和JavaScript #

把表单的onsubmit改成调用验证函数，同时移除按钮的click事件绑定，改用表单的submit事件来处理：

<form action="/register" onsubmit="return validateUsername()" method="post" id="register">
    <div class="form-group">
        <input autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
    </div>
    <div class="form-group">
        <input class="form-control" name="password" placeholder="Password" type="password">
    </div>
    <div class="form-group">
        <input class="form-control" name="confirmation" placeholder="Confirm Password" type="password">
    </div>
    <button class="btn btn-primary" id="submittion" type="submit">Register</button>
</form>

<script>
function validateUsername() {
    // 阻止表单默认提交行为
    event.preventDefault();
    let username = document.querySelector('input[name=username]').value;
    
    $.get('/check?username=' + username, function(data) {
        if (!data) {
            alert("Username is not available!");
        } else {
            // 如果用户名可用，手动提交表单
            document.getElementById('register').submit();
        }
    }).fail(function() {
        // 处理请求失败的情况，比如网络错误
        alert("Failed to check username availability.");
    });
    
    // 这里必须返回false，防止表单提前提交
    return false;
}
</script>

3. 后端代码的小优化（可选） #

后端的判断逻辑可以稍微调整下，更清晰：

@app.route("/check", methods=["GET"])
def check():
    """Return true if username available, else false, in JSON format"""
    username = request.args.get("username", "").strip()
    # 先判断用户名是否为空
    if not username:
        return jsonify(False)
    # 再查询是否存在
    rows = db.execute("SELECT * FROM users WHERE username = :username", username=username)
    return jsonify(len(rows) == 0)

关键修复点说明 #

• 阻止默认提交：在validateUsername开头用event.preventDefault()，并且函数最后返回false，确保表单不会在AJAX请求完成前提交。
• 手动提交表单：当用户名可用时，调用document.getElementById('register').submit()来手动触发表单提交。
• 处理请求失败：添加.fail()回调，避免网络错误时用户无反馈。
• 统一事件处理：用表单的onsubmit事件代替按钮的click事件，更符合表单提交的逻辑。

内容的提问来源于stack exchange，提问作者Mashaal