使用jQuery

时间:2019-02-28 16:16:15

标签: javascript python jquery json

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>

谢谢!

2 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分: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)

  • 始终注意控制台上的错误