jQuery PreventDefault不会停止执行

Question

我应该先粘贴代码

$(document).ready(function(){
    $("#submit").click(function(e){                                    
        $(".error").hide();
        var hasError = false;

        .... ....

        var captcha = $("#captchacode").val();
        if(captcha == '') {
            $("#captchacode").after('<span class="error">You forgot to enter security image.</span>');
            hasError = true;
        } else {

            $.post("/checkcaptcha.php",
                { captchac: captcha},
                    function(data){

                        if (data == "Invalid"){
                            $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>');
                            hasError = true;
                            e.preventDefault();
                        }
                    }
            );
        }


        if(hasError == false) {
            $(this).hide();
            $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />');

            $.post("/sendemail.php",
                { emailFrom: emailFromVal, name: name, message: messageVal },
                    function(data){
                        $("#sendEmail").slideUp("normal", function() {                 

                            $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>');                                          
                        });
                    }
                 );
        }

        return false;
    });                        
});

一切正常。正在发送电子邮件。我在获取无效验证码值时收到错误消息。在显示错误消息之后，它将在下一步进行，表单正在提交。我需要你的建议来解决这个问题。

感谢。

Answer 1

jQuery.post()函数是AJAX调用的简写。 AJAX调用是异步的，通过传递在请求完成时执行的回调来工作。在请求收到响应之前，调用$.post() 不会停止执行代码，因为AJAX的全部意义在于不。这意味着您的if(hasError == false)行将在回调函数的if (data == "Invalid")部分之前执行。

如果你希望在来自AJAX调用的响应之后发生，那么你需要将它移动到回调函数：

$(document).ready(function () {
    $("#submit").click(function (e) {
        $(".error").hide();
        var hasError = false,
            elem = this;

        ........

        var captcha = $("#captchacode").val();
        if (captcha == '') {
            $("#captchacode").after('<span class="error">You forgot to enter security image.</span>');
            hasError = true;
        } else {

            $.post("/checkcaptcha.php", {
                captchac: captcha
            },

            function (data) {

                if (data == "Invalid") {
                    $("#captchacode").after('<span class="error">Invalid security text. Please try again</span>');
                    hasError = true;
                    e.preventDefault();
                } else {
                    $(elem).hide();
                    $("#sendEmail li.buttons").append('<img src="images/loading.gif" alt="Loading" id="loading" />');

                    $.post("/sendemail.php", {
                        emailFrom: emailFromVal,
                        name: name,
                        message: messageVal
                    },

                    function (data) {
                        $("#sendEmail").slideUp("normal", function () {

                            $("#sendEmail").before('<h1>Success</h1><p>Your email was sent.</p>');
                        });
                    });
                }
            });
        }
        return false;
    });
});