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="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
    /form>
    script>
       let username = document.querySelector('input[name=username]');
       document.getElementById("submittion").addEventListener("click",function() {
            $.get('/check?username=' + username.value, function(data) {
                if (data==false){
                    data.preventDefault();
                    alert("Username is not available!");
                }
                else {
                   alert("not working");
                }
            });
        });

</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;
});

替代

您也可以直接通过Ajax发布到/register路由并在那里进行验证/检查。一切正常后，您可以注册用户并返回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，并使用形式错误呈现模板。但这超出了这个问题的范围；）

为什么我无法显示警报？

1 个答案: