jquery 为什么当数据输入正确(JavaScript, AJAX )时表单不发送?

6qqygrtg  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(148)

有一个登录表单:

{% 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()有关;

gudnpqoy

gudnpqoy1#

你必须改变你的逻辑。您正在阻止正常的提交发生,而是进行 AJAX 调用,并根据此调用的响应来决定是否进行正常的提交。
下面的行将强制提交,因为表单标签中没有URL,它将提交到您的当前页面,这就是为什么您在提交时返回页面,而不是这一行,您希望将用户重定向到主页,例如

$("#login-form")[0].submit();

相关问题