时间戳

首页 > 解决方案 > 为什么我不能让警报显示？

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

问题描述

我一直在尝试使用警报作为告诉用户给定用户名已经注册但未显示警报消息的方式。

因此，想法是在注册时将用户名发送到 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">
            输入 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">注册
    /表格>
    脚本>
       让用户名 = document.querySelector('input[name=username]');
       document.getElementById("submittion").addEventListener("click",function() {
            $.get('/check?username=' + username.value, function(data) {
                如果（数据==假）{
                    data.preventDefault();
                    alert("用户名不可用！");
                }
                别的 {
                   警报（“不工作”）；
                }
            });
        });


</script>

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

PS：我知道我遗漏了一些内容<以便正确显示我的 HTML 代码。

标签： javascriptpythonflaskalertcs50

解决方案

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，并使用表单错误呈现模板。但这超出了这个问题的范围；）

推荐阅读