为什么我不能让警报显示？

Question

我一直在尝试使用警报来告诉用户给定的用户名已经注册，但没有显示警报消息。

因此，想法是在注册时将用户名发送到 python，在那里将检查用户名是否已经存在，如果存在，则代码将返回 jsonify(False)。然后在javascript中，如果返回是false，它应该显示一条警告消息。但是我的代码不起作用。

Python：

@app.route("/check", methods=["GET"])
def check():
       """Return true if username available, else false, in JSON format"""
username = request.args.get("username")
rows = db.execute("SELECT * FROM users WHERE username = :username", username=username)
if len(rows) >= 1 or len(username) < 1:
    return jsonify(False)
else:
    return jsonify(True)

HTML：

form action="/register" onsubmit="validateUsername()" method="post" id ="register"> div class="表单组"> 输入 autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text"> /div> div class="表单组"> 输入 class="form-control" name="password" placeholder="Password" type="password"> /div> div class="表单组"> 输入 class="form-control" name="confirmation" placeholder="Confirm Password" type="password"> /div> 按钮 class="btn btn-primary" id="submittion" type="submit">注册 /表格> 脚本> 让用户名 = document.querySelector('input[name=username]'); document.getElementById("submittion").addEventListener("click",function() { $.get('/check?username=' + username.value, function(data) { 如果（数据==假）{ data.preventDefault(); alert("用户名不可用！"); } 别的 { 警报（“不工作”）； } }); }); </script>

提交数据时，应提醒用户该用户名已存在。

PS：我知道我留下了一些 < 以便正确显示我的 HTML 代码。

Answer 1

ajax 请求在提交时发送，但在提交表单之前没有足够的时间接收响应。要防止表单提交，您可以使用event.preventDefault:

document.getElementById("submittion").addEventListener("click", function(event) {
  event.preventDefault();
  // The ajax call
});

更新

您可能希望收听表单 submit 事件而不是按钮 click（例如，用于键盘支持）。也就是说，这里的问题是提交处理程序需要“等待”异步 ajax 检查。

要完成这项工作，您可以跟踪用户是否被检查并在禁用检查时重新提交（下面的未经测试的代码）：

const form = document.getElementById("register");
const username = form.querySelector("input[name=username]");
let checkUser = true;

form.addEventListener("submit", function(event) {
  if (checkUser) {
    // Prevent the form from submitting
    event.preventDefault();

    // Check the username
    $.get("/check?username=" + username.value, function (data) {
      if (data === false) {
        alert("Username is not available!");
      } else {
        // Resubmit the form without the user check
        checkUser = false;
        form.submit();
        return;
      }
    });
  }

  // Reset the variable for the next check
  checkUser = true;
});

替代方案

您也可以直接发布到/register 路由（通过 ajax）并在那里执行验证/检查。当一切正常时，您可以注册用户并返回true，否则当检查失败时返回false：

form.addEventListener("submit", function(event) {
  // Prevent the form from submitting
  event.preventDefault();

  // Post the form data
  $.post(form.action, form.serialize(), function(data) {
    if (data === false) {
      // Register failed
      alert("Username is not available!");
    } else {
      // Register successfull
      window.location.replace("/welcome");
    }
  });
});

也许你可以尝试通过在服务器端执行所有逻辑来避免使用 JavaScript，并渲染带有表单错误的模板。但这超出了这个问题的范围；）