使用jQuery检查数据库的用户名

Question

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>

谢谢!

Answer 1

您的Javascript包含许多错误.

首先,let input document.querySelector('username')缺少等号,这在进行变量赋值时是必需的.除此之外,您的查询选择器不正确,因为它正在查找用户名元素(不存在).您应该使用name属性设置为"username"的控件类查询DOM以获取输入元素; 查询选择器将是'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:.ifJavascript中的语句括号中的条件和用大括号执行的代码.这应该正确写为:

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),因为控制台会向您指示任何语法错误(或其他错误)及其发生的行.