Submit after a jquery-ajax function

问题

I check two values with ajax. And if both are correct then i want to make a submit (post-back). But the post-back doesn't work.

Here is the code:

 $('form').submit(function () {

            var correctCaptcha = false;
            var correctWebcode = false;

        $.ajax({
            url: '/Competition/CheckForm',
            type: "POST",
            data: $(this).serialize(),
            success: function (data) {
                if (data == true) {
                    $('#recaptcha_response_field').removeClass("captchaError");
                    correctCaptcha = true;
                }
                else {
                    Recaptcha.reload();
                    $('#recaptcha_response_field').addClass("captchaError");
                }
            }
        });

        $.ajax({
             // like the code above (for webcode)
        });

        if (correctCaptcha == true && correctWebcode == true) {
            document.forms['form'].submit();
        }
        else { return false; }
    });

回答1:

Use Async:false

    $.ajax({
        url: '/Competition/CheckForm',
        type: "POST",
        async:false,
        data: $(this).serialize(),
        success: function (data) {
            if (data == true) {
                $('#recaptcha_response_field').removeClass("captchaError");
                correctCaptcha = true;
            }
            else {
                Recaptcha.reload();
                $('#recaptcha_response_field').addClass("captchaError");
            }
        }
    });

This will cause the infinite loop:

if (correctCaptcha == true && correctWebcode == true) {
    document.forms['form'].submit();
}

So use use like this here

if (correctCaptcha == true && correctWebcode == true) {
    return true;
}
else {return false;}

回答2:

Since ajax is async in nature you cannot expect those variables to be set right away when ajax call. You can either set async to false or submit the form inside success handler. Try this.

$('form').submit(function () {

            $.ajax({
                url: '/Competition/CheckForm',
                type: "POST",
                data: $(this).serialize(),
                success: function (data) {
                    if (data == true) {
                        $('#recaptcha_response_field').removeClass("captchaError");
                        $('form')
                        .unbind('submit')//we dont need any handler to execute now
                        .submit();
                    }
                    else {
                        Recaptcha.reload();
                        $('#recaptcha_response_field').addClass("captchaError");
                    }
                }
            });


            $.ajax({
                 // like the code above
            });


            return false;//To prevent the form from being submitted.
        });

回答3:

By default, $.ajax works asynchronously, your way won't submit the form, you should submit the form in the callback function.

来源：https://stackoverflow.com/questions/9016460/submit-after-a-jquery-ajax-function

标签

ajax

asp.net-mvc-3

jquery