Как я могу использовать функцию jQuery $ .ajax, чтобы остановить или разрешить отправку формы?

Question

$('#post_form').submit(function() {
    $("#ajax_bar_loader").show();
    $.ajax({
        url: 'add.html',
        data: $('#post_form').serialize(),
        dataType: 'json',
        type: 'post',
        success: function( result ) {
            retVal = formCheck( result );
        }
    });

    return false;
});

Вот так выглядит мой код, и вместо «return false» я хочу разрешить, если данные, содержащиеся в «result», говорят. Как мне это сделать?

Answer 1

Вы можете сделать это так:

$.ajax({
    url: 'add.html',
    data: $('#post_form').serialize(),
    dataType: 'json',
    type: 'post',
    success: function( result ) {
        retVal = formCheck( result );
        if(retVal)
          $('#post_form').unbind('submit').submit();
        else
          alert('Error with your form! Oh crap!');
    }
});

Поскольку вы отправляете сообщения обратно и уходите, это просто отменяет привязку этого обработчика в случае успеха и позволяет отправке происходить нормально при вызове, поэтому код не запускается и не проверяется снова, он просто отправляет.

Answer 2

Я бы предложил всегда возвращать false в конце обработчика событий, чтобы предотвратить нормальную отправку формы. В случае успешного обратного вызова на $.ajax вы можете условно перенаправить на основе ответа от сервера:

$('#post_form').submit(function() {
    $("#ajax_bar_loader").show();
    $.ajax({
        url: 'add.html',
        data: $('#post_form').serialize(),
        dataType: 'json',
        type: 'post',
        success: function( result ) {
            if(result == 'something') {
                alert("some error happened");
            } else {
                // assuming we're visiting the form's action
                window.location.href = $(this).attr("action");
            }
        }
    });
    return false;
});

Неверно рассчитывать на то, что обратный вызов успеха сработает до завершения выполнения обработчиком отправки, поскольку код, следующий за вызовом $.ajax, очень вероятно будет оценен до того, как будет выполнен успешный обратный вызов ($.ajax будет выполняться асинхронно). *

Answer 3

Я не уверен, будет ли это работать для вашей проблемы, но что, если вы сделали синхронный запрос ajax?

Я заставил этот фиктивный код "работать", он запускает запрос ajax и затем устанавливает логическое значение. Затем форма возвращает истину или ложь на основе логического значения:

$(document).ready(function() {
    $('form').submit(function() {
        var should_return = false;
        $.ajax({
            async: false,
            url: 'test.php',
            type: 'post',
            success: function() {
                // Do some type of check
                should_return = true;
            }
        });
        return should_return;
    });
});

Answer 4

    success: function(result) {
        ...
        document.forms.post_form.submit();
    }