防止在 jQuery 表单上提交答案

【问题标题】：Prevent submit on a jQuery form防止在 jQuery 表单上提交
【发布时间】：2016-04-03 13:32:58
【问题描述】：

我正在使用 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;
    });
});

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

【问题讨论】：

标签： javascript jquery ajax login preventdefault

【解决方案1】：

您有一个异步 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"，因此请相应地更改。

【讨论】：

【解决方案2】：

只有当您不想提交表单时，您才必须返回 false。如果密码正确，您需要在您的情况下返回 true。

【讨论】：

正确的密码由异步 ajax 调用确定，因此任何 return true 都会在 ajax 完成之前发生。
这种情况下，ajax调用判断密码是否正确，如果正确他要提交表单，所以必须在success方法中返回true。阅读问题...
ajax 调用是异步的。提交事件不会等待该调用，它在 ajax 得到响应之前很久就完成了。你的答案和另一个基本一致，用户发现不正确后被删除。
在表单的submit方法中返回true会提交表单，返回false则不会。如果密码正确，则返回 true，否则返回 false 并打印错误。这是一个很好的方法，它允许不像你那样在 javascript 变量中重新加载表单。
使用异步 ajax 调用，您描述的是一个错误的概念。我邀请您制作一个测试示例并尝试一下。我保证它不会起作用。