防止在 jQuery 表单上提交

Question

我正在使用 jQuery 和 ajax 在登录表单上设置密码控件。
到目前为止，这是脚本

$(document).ready(function() {
    $("#login-form").submit(function(e) {
        var csrftoken = getCookie('csrftoken');
        var password = $('#login-password').val();
        var email = $('#login-email').val();

        $.ajax({
            url: "/password_check/",
            type: "POST",
            dataType: "json",
            data : {
                csrfmiddlewaretoken: csrftoken,
                password: password,
                email: email
            },
            success: function(result) {
                document.getElementById("login-error").innerHTML = result.response;
                event.preventDefault();
            }
        });
        return false;
    });
});

有了这个，在触发提交按钮时会捕获到错误，但如果密码正确，提交将不起作用（即使错误不再出现）。
我错过了什么？

Answer 1

仅当您不想提交表单时，才必须 return false。如果密码正确，您需要 return 为真。

Answer 2

您有一个异步 ajax 调用，因此当您的 success 函数触发时，表单提交事件已经过去，因此您需要再次提交表单但使用 DOM 方法，它将绕过 jQuery 事件处理程序并允许表单提交。

success: function(result) {
    if(result == "correct"){
        document.getElementById("login-form").submit();
    } else {
        document.getElementById("login-error").innerHTML = result.response;
    }
}

因为你没有说什么响应表明密码正确，我已经使用了 result == "correct"，所以相应地更改它。

防止在 jQuery 表单上提交

Prevent submit on a jQuery form

javascript

ajax

jquery

login

preventdefault