有一个登录表单:
{% block content %}
<form method="POST" class="login-form" id="login-form">
{{ login_form.hidden_tag() }}
<div class="form-group">
{{ login_form.name.label }}
{{ login_form.name(class="form-control", id="login_form_name", placeholder="Name") }}
</div>
<div class="form-group">
{{ login_form.password.label }}
{{ login_form.password(class="form-control", id="login_form_password", placeholder="Password") }}
<p id="incorrect-data-error" class="error-message" style="margin-top: 30px;"></p>
</div>
<div class="form-group">
{{ login_form.recaptcha.label }}
{{ login_form.recaptcha(class="g-recaptcha") }}
<p id="recaptcha-error" class="error-message" style="margin-top: 30px;"></p>
</div>
<div class="form-group">
{{ login_form.submit(class="btn btn-primary", id="login-form-submit") }}
<p id="session-exists-error" class="error-message" style="margin-top: 30px;"></p>
</div>
</form>
<p class="register_account_message">Don't have an account? <a href="/signup">Signup here</a></p>
{% endblock %}
有一个js-script,它与此表单相关联。它使用 AJAX ,在按下Log In按钮后将数据从表单发送到服务器:
$(document).ready(function() {
$("#login-form").on("submit", function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: "POST",
url: "/check_login_user_credentials",
data: formData,
success: function(response) {
if (response.response === 'Incorrect data') {
$("#incorrect-data-error").text('Incorrect username or password');
} else if (response.response === 'Session already exists') {
$("#session-exists-error").text('This account is already in use. Please try again later.');
} else if (response.response === 'Allow') {
$("#incorrect-data-error").text('');
$("#login-form")[0].submit();
}
}
});
});
});
数据发送到的路由:
@app1.route('/check_login_user_credentials', methods=['GET', 'POST'])
def check_login_user_credentials():
hashed_password = sha256(request.form.get('password').encode('utf-8')).hexdigest()
user = User.query.filter(User.name==request.form.get('name'), User.password==hashed_password).first()
if user:
if user.active_session:
return jsonify({ 'response': 'Session already exists' })
else:
return jsonify({ 'response': 'Allow' })
return jsonify({ 'response': 'Incorrect data' })
问题是,当数据输入不正确和/或帐户已登录较早时,一切都正常工作(表单不发送,相应的消息出现)。但是,当数据是正确的,没有人以前登录到帐户,然后没有消息(因为它应该是),但形式仍然没有发送,虽然它应该是。我只是点击按钮,什么也没发生,尽管数据是 AJAX 发送的。
如果有的话,我使用这个版本的jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
如果有的话,ChatGPT不能处理它)任何帮助和建议将是伟大的。
据我所知,它很可能与event.preventDefault()有关;
1条答案
按热度按时间gudnpqoy1#
你必须改变你的逻辑。您正在阻止正常的提交发生,而是进行 AJAX 调用,并根据此调用的响应来决定是否进行正常的提交。
下面的行将强制提交,因为表单标签中没有URL,它将提交到您的当前页面,这就是为什么您在提交时返回页面,而不是这一行,您希望将用户重定向到主页,例如