使用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缺乏经验。首先，我有一个相当简单的超文本标记语言代码来设置注册页面：

    <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来调用它，以便检查用户名是否已经存在。如果没有，则check函数应以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

你的代码肯定会给出很多错误...当你使用jQuery时，你可以像这样提交表单

$('form').on('submit' , function(e){
  e.preventDefault();  // use it outside `$.get` not inside it
  console.log($('input[name="username"]').val()); // get the username value
  console.log($(this).serialize()); // get form serialize data
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>aA

Answer 2

您的Javascript包含许多错误。

首先，让输入document.query选择器（用户名）缺少一个等号，这在进行变量赋值时是必要的。除此之外，您的查询选择器是不正确的，因为它正在寻找用户名元素（不存在）。您应该在DOM中查询具有name属性设置为"username"的控件类的输入元素；查询选择器将是'input.form-control[name="username"]'。这一行应该是：

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

请参见document.query选择器。

其次，您编写了$.get（'/check？username='input.value，这是不正确的；如果您要连接两个字符串，则应使用运算符。该部分代码应重写为：

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

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

 function(data){   
  //code here
 }

第四，你写了if data==False：.ifJavascript中的语句在括号中有条件，在大括号中有代码执行。应正确写成：

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

最后，在调用jQuery的$. get时，您忘记了结束括号。函数应该在函数名后面用一个开始括号和一个结束括号来调用——即，函数名（/*参数在这里*/）。你写的

$.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），因为控制台将向您指示任何语法错误（或其他错误）及其发生的行。