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

Question

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

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

@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 格式发回“真”。之后应提交表格。如果它已经存在，我想发送警告消息说“这个用户名已经被占用”并且我想阻止表单被提交。这是我在 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') 缺少一个等号，这在进行变量赋值时是必需的。除此之外，您的查询选择器不正确，因为它正在寻找用户名元素（不存在）。您应该在 DOM 中查询一个 input 元素，其中包含 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)，因为控制台会向您指示任何语法错误（或其他错误）以及它们发生的行。

Answer 2

您的代码肯定会出现很多错误。当您使用 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

补充：

• 在javascript中使用+连接字符串

  $.get('/check?username=' + input.value, function(data)

• 始终关注控制台是否有错误