多次弹出警报并提交按钮仅在第二次单击后才起作用答案

【问题标题】：Alert popping up multiple times and submit button only working after second click多次弹出警报并提交按钮仅在第二次单击后才起作用
【发布时间】：2019-10-11 04:28:36
【问题描述】：

我正在处理我的 CS50 最终项目。我正在设计一个网络应用程序：我正在使用烧瓶。这发生在登录/注册页面中。我正在尝试检查用户名是否已被使用（通过 jsonify）以及密码和密码确认是否使用 JS 相等。

所以基本上问题是：加载页面并填写注册表后，第一次单击提交按钮时没有任何反应。在第二次单击时，一切都按预期工作：功能运行良好并检查匹配的密码，以及用户名是否可用，并在必要时发出警报。如果我然后关闭警报窗口并再次单击提交按钮，我会从 usercheck 函数中收到两个警报。如果再次做同样的事情 3 个警报然后 4 个等等....由于某种原因，该函数被一次又一次地调用，但我不知道在哪里....

这是 HTML：

<form id='register' action='/register' method="POST"  onsubmit="return !!(passwordcheck() & usercheck());" ></form>

这是同一页面中一个脚本标签中的两个 JS 函数：

 function passwordcheck(){

       const password = document.getElementById('password').value;
       const passwordc = document.getElementById('passwordc').value;

       if (password != passwordc){
         alert('Passwords do not match')
         return false;
       }
     }

        function usercheck(){

  $('document').ready(function(){

    $('form').on('submit',function(e){

      e.preventDefault();
      var username = document.querySelector('#username').value;
      $.get('/check?username=' + username, function(r){
        if(r == false){
          alert('User taken');
          $('#username').focus();
        }
        else{
          (document).getElementById('register').submit();
        }
      } )
    })
  })
}

下面是 application.py 文件中的 Python 代码，用于查询数据库中的用户名：

@app.route("/check", methods=["GET"])
def check():
    print(Fore.BLUE + "check function, line 99") 
    """Return true if username available, else false, in JSON format"""
    username = (request.args.get('username'),)
    if username:

        c.execute("SELECT username FROM users WHERE username =?", username)
        old_user = c.fetchall()

        if len(old_user) > 0:
            return jsonify(False)
        else:
            return jsonify(True)

【问题讨论】：

为什么将jQuery DOM 就绪函数放在usercheck() 函数中？

标签： javascript python jquery html

【解决方案1】：

您已经为表单提交事件定义了两个处理程序：
- html 中的第一个 (onsubmit="return !!(passwordcheck() & usercheck());") 是 userCheck 函数，它实际上并不发出请求
- 发出请求的userCheck 函数 ($('form').on('submit',function(e){) 中的第二个

所以第一次提交时调用userCheck 函数，它不会发出请求，而是向表单添加提交事件处理程序。这就是为什么仅在第二次提交表单后才提出请求的原因。

你应该这样更好：

function passwordcheck() {

    const password = document.getElementById('password').value;
    const passwordc = document.getElementById('passwordc').value;

    if (password != passwordc) {
        alert('Passwords do not match')
        return false;
    }
}

function usercheck(handleSuccess, handleError) {
    var username = document.querySelector('#username').value;
    $.get('/check?username=' + username, function(r) {
        if (r == false) {
            handleError();
        } else {
            handleSuccess();
        }
    })
}

function submit() {
    (document).getElementById('register').submit();
}

function handleUserError () {
    alert('User taken');
    $('#username').focus();
}

$('document').ready(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();

        if (!passwordcheck()) {
            return;
        }

        usercheck(submit, handleUserError);
    })
})

并且在您的表单元素上没有 onsubmit 属性。

【讨论】：