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>
谢谢!
答案 0 :(得分:5)
您的Javascript包含许多错误。
首先,let input document.querySelector('username')
缺少等号,这在进行变量分配时是必需的。除此之外,您的查询选择器不正确,因为它正在寻找用户名元素(不存在)。您应该在DOM中查询输入元素,该输入元素的控件类的名称属性设置为“ username”;查询选择器将为'input.form-control[name="username"]'
。
该行应为:
let input = document.querySelector('input.form-control[name="username"]');
第二,您写了$.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)
始终注意控制台上的错误