Как вызвать второй экземпляр jQuery.ajax при успешном завершении первой страницы и страницы обновления

Question

У меня есть несколько jQuery, которые запускаются при нажатии на ссылку с классом 'changetag'.Я использую $.ajax() для обновления базы данных с помощью changetag.php.

Затем я изменяю внешний вид ссылки, переключая класс между вкл / выкл.Код выглядит следующим образом:

$(function() {
$(".changetag").click(function(){
    var element = $(this);
    var I = element.attr("id");
    var info = 'switch_tag=' + I;

    $.ajax({
        type: "POST",
        url: "_js/changetag.php",
        data: info,
        success: function(){}
    });

    $("#li_"+I).toggleClass("off on");
    element.toggleClass("off on");

    return false;
});
});

Работает отлично.Но теперь я хочу добавить второй вызов PHP, который будет извлекать данные и обновлять другую область страницы, если вышеописанное было успешным.

Я пытаюсь добавить следующее:

$.ajax({
    url: "_js/loaddata.php",
    success: function(results){
        $('#listresults').empty();
        $('#listresults').append(results);
    }
});

Но просто добавив его в успех: функция () {}, похоже, не работает.Чтобы уточнить, вот полный код, который я тестирую:

$(function() {
$.ajaxSetup ({cache: false});
$(".changetag").click(function(){
    var element = $(this);
    var I = element.attr("id");
    var info = 'switch_tag=' + I;

    $.ajax({
        type: "POST",
        url: "_js/changetag.php",
        data: info,
        success: function(){
            $.ajax({
                url: "_js/loaddata.php",
                success: function(results){
                    $('#listresults').empty();
                    $('#listresults').append(results);
                }
            });
        }
    });

    $("#li_"+I).toggleClass("off on");
    element.toggleClass("off on");

    return false;
});
});

Сценарии PHP и так успешно вызываются, и класс переключения работает, но извлеченные данные по какой-то причине не записываются в #listresults.

Answer 1

Ajax-вызовы (по умолчанию) асинхронные . Это означает, что этот код:

$("#li_"+I).toggleClass("off on");
element.toggleClass("off on");

return false;

может быть выполнено до завершения вызова ajax, предшествующего ему. Это общая проблема для программистов, которые плохо знакомы с AJAX и асинхронным выполнением кода. Все, что вы хотите выполнить после выполнения вызова ajax, должно быть помещено в обратный вызов , такой как ваш обработчик success:

$.ajax({
    type: "POST",
    url: "_js/changetag.php",
    data: info,
    success: function(){
        $("#li_"+I).toggleClass("off on");
        element.toggleClass("off on");
    }
});

Аналогично, вы могли бы также выполнить второй вызов ajax:

$.ajax({
    type: "POST",
    url: "_js/changetag.php",
    data: info,
    success: function(){
        $("#li_"+I).toggleClass("off on");
        element.toggleClass("off on");

        $.ajax({
            url: "_js/loaddeals_v2.php",
            success: function(results){
                $('#listresults').empty();
                $('#listresults').append(results);
            }
        });
    }
});

С jQuery 1.5 Deferred Object вы можете сделать это более привлекательным.

function firstAjax() {
    return $.ajax({
        type: "POST",
        url: "_js/changetag.php",
        data: info,
        success: function(){
            $("#li_"+I).toggleClass("off on");
            element.toggleClass("off on");
        }
    });
}

// you can simplify this second call and just use $.get()
function secondAjax() {
    return $.get("_js/loaddata.php", function(results){
        $('#listresults').html(results);
    });
}

// do the actual ajax calls
firstAjax().success(secondAjax);

Это хорошо, потому что он позволяет откатывать обратные вызовы - вы можете написать код, который выполняется асинхронно, но написан как синхронно исполняемый код.