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')缺少等号，这在进行变量分配时是必需的。除此之外，您的查询选择器不正确，因为它正在寻找用户名元素（不存在）。您应该在DOM中查询输入元素，该输入元素的控件类的名称属性设置为“ 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)
始终注意控制台上的错误

使用jQuery

2 个答案: