深入理解AJAX表单提交：避免重定向陷阱与优化用户体验

{% 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 %}

$(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' })

$(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');
          $("#session-exists-error").text(''); // 清除其他可能的错误信息
        } else if (response.response === 'Session already exists') {
          $("#session-exists-error").text('This account is already in use. Please try again later.');
          $("#incorrect-data-error").text(''); // 清除其他可能的错误信息
        } else if (response.response === 'Allow') {
          $("#incorrect-data-error").text('');
          $("#session-exists-error").text('');
          // **修改点：直接进行页面重定向**
          window.location.href = '/dashboard'; // 假设成功后跳转到 /dashboard 页面
          // 或者使用 window.location.replace('/dashboard'); 如果不希望用户能通过浏览器回退按钮返回登录页
        }
      },
      error: function(xhr, status, error) {
        // 处理AJAX请求失败的情况，例如网络错误或服务器内部错误
        console.error("AJAX request failed: ", status, error);
        $("#incorrect-data-error").text('An unexpected error occurred. Please try again.');
      }
    });
  });
});

// ...
success: function(response) {
  // ...
  else if (response.response === 'Allow') {
    $("#incorrect-data-error").text('');
    $("#login-form")[0].submit(); // 此处会导致表单提交到当前页面
  }
}
// ...

// ...
success: function(response) {
  // ...
  else if (response.response === 'Allow') {
    $("#incorrect-data-error").text('');
    $("#session-exists-error").text('');
    // 成功后，直接将浏览器重定向到目标页面
    window.location.href = '/dashboard'; // 将 '/dashboard' 替换为实际的目标URL
  }
}
// ...