javascript之使用 jQuery 检查数据库中的用户名_编程设计

TL;DR => 底部代码框中的代码有什么问题。

我正在尝试调用一个名为“check”的函数，该函数将检查填写的用户名是否不为空并且不存在于我的数据库中。此检查函数如下所示:

@app.route("/check", methods=["GET"]) 
def check(): 
    """Return true if username available, else false, in JSON format""" 
    # User reached route via POST (as by submitting a form via POST) 
 
    if request.method == "GET": 
 
    username = request.args.get("username") 
 
    usernames = db.execute("SELECT * FROM users")[0][username] 
 
    if username is not None and len(username) > 1: 
        if username not in usernames: 
            return jsonify(True) 
        else: 
            return jsonify(False) 
    else: 
        return jsonify(False)

我不知道这段代码是否按原样工作，但我想我可以做到。问题是我对 jQuery 缺乏经验。首先，我使用这段相当简单的 HTML 代码来设置注册页面:

    <form action="/register" method="post"> 
        <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="Password" type="password"> 
        </div> 
        <button class="btn btn-primary" type="submit">Register</button> 
    </form> 
{% endblock %}

我现在想在尝试提交表单时使用 jQuery 来调用它，以检查用户名是否已经存在。如果不是，检查函数应以 JSON 格式发回“true”。之后应提交表格。如果它已经存在，我想发送警告消息说“此用户名已被占用”并且我想阻止提交表单。这是我在 jQuery 中的尝试，有人能告诉我它有什么问题吗？

{% block main %} 
<script> 
    let input document.querySelector('username'); 
    document.querySelector('form').onsubmit = function(event) { 
        $.get('/check?username=' input.value, function(data) 
            if data == False: 
            alert("This username is already taken"); 
            event.preventDefault(); 
    } 
</script>

谢谢!

请您参考如下方法:

您的 Javascript 包含很多错误。

首先，let input document.querySelector('username') 少了一个等号，这在做变量赋值的时候是必须的。除此之外，您的查询选择器不正确，因为它正在寻找用户名元素(不存在)。您应该在 DOM 中查询一个 input 元素，该元素的 class for control 的 name 属性设置为“username”；查询选择器将是 'input.form-control[name="username"]'。该行应该是:

let input = document.querySelector('input.form-control[name="username"]');

参见 document.querySelector .

其次，你写了 $.get('/check?username=' input.value，这是不正确的；如果你想连接两个字符串，+应该使用运算符。那部分代码应该重写为:

$.get('/check?username=' + input.value

第三，对于 jQuery.get 的回调函数，当函数表达式需要大括号时，您编写了 function(data) [code here]。正确的代码是:

 function(data){    
  //code here 
 }

第四，你写了if data == False:。 Javascript 中的 if 语句在括号中包含条件，在大括号中包含要执行的代码。应该正确地写成:

if(data === false){ 
  //do something 
}

最后，您在调用 jQuery 的 $.get 时忘记了结束括号。调用函数时应在函数名称后加上开始括号和结束括号，即 functionName(/*arguments go in here*/)。你写了

$.get(/*<-this bracket is never closed*/ '/check?username=' input.value, function(data) 
            if data == False: 
            alert("This username is already taken"); 
            event.preventDefault();

正确的代码是:

$.get('/check?username=' + input.value, function(data){ 
     //do stuff 
});

更正后的代码:

let input = document.querySelector('input.form-control[name="username"]'); 
document.querySelector('form').onsubmit = function(event) { 
   $.get('/check?username=' + input.value, function(data){ 
         if(data === false){ 
            alert("This username is already taken"); 
            event.preventDefault(); 
         } 
   }); 
}

我建议您在尝试编写 Javascript 之前先阅读 Javascript 教程。同样，您在调试时应该始终检查控制台 (Ctrl + Shift + I)，因为控制台会向您指示任何语法错误(或其他错误)以及它们发生的行。