Выполнение двух вызовов ajax поочередно

Question

Выполнение двух вызовов ajax поочередно

-1

У меня есть два вызова ajax ниже, которые сделаны, когда пользователь нажимает кнопку, чтобы открыть галерею:

              // Get the sub-folders and their position 
$.post('ajax.php', {op : 'get_folders'},       
                           function() {  
                                       . . .
                           });

             // Get the gallery thumbs

$("#galleryContent").load("ajax.php", 
                           {op : 'get_thumbs' 
                           },
                           function() {  
                                . . .                 
                            });

Было бы неплохо запустить второй вызов ajax до того, как будет сделан первый, поэтому я думаю, что мне нужно использовать.when(),.done() или.then(), чтобы синхронизировать эти вызовы, но не просто решение выходит из отложенной документации для меня. Кто-нибудь видит простой способ сделать это? Мне не нужно передавать какие-либо переменные от первого вызова ко второму вызову. Я просто хочу отложить второй, пока не будет сделано первое.

благодаря

Steve 07 нояб. 2014, в 15:34

Источник

Теги:

jquery

ajax

4 ответа

1

Как вы сказали, два слова: когда и что.

$.when(ajax1()).done(function()
{
    ajax2();
});

и вы должны вернуть объект jqXHR для любого запроса ajax

function ajax1()
{
    return $.post({...});
}

Matías Cánepa 07 нояб. 2014, в 14:02

1

Самое простое, о котором я могу думать:

//make the second ajax call
$("#galleryContent").load("ajax.php",{op : 'get_thumbs' }, function() {  
    //. . .
    //once it successfully completes, make the first ajax call
    $.post('ajax.php', {op : 'get_folders'}, function() {  
         //. . .
    });             
});

PeterKA 07 нояб. 2014, в 11:03

0

Я думал о том, чтобы поместить второй вызов в функцию завершения первого, но второй вызов имеет большую обработку, и я не хотел хоронить весь этот код в функции завершения. Если есть чистый способ сделать с помощью when () и т. Д., Я бы предпочел сделать это.
Steve 07 нояб. 2014, в 14:12

0

$.ajax и $.post поддержка fail/success и т.д. события, которые срабатывают, когда они завершатся успешно или с ошибкой, просто вызовите следующий ajax тогда.. вот так:

            $.ajax({
                url: 'someurl',
                type: "POST"
            }).success(function (data, textStatus, jqXhr) {
                // ajax call is done, do another one
                $.ajax({
                    url: 'someurl',
                    type: "POST"
                }).success(function (data2, textStatus2, jqXhr2) {
                    // 2nd ajax call is done
                }).error(function (jqXhr2, testStatus2, errorThrown2) {
                    // ajax call error, alert user!
                });
            }).error(function (jqXhr, testStatus, errorThrown) {
                // ajax call error, alert user!
            });

erikrunia 07 нояб. 2014, в 12:54

Ещё вопросы

Я думал о том, чтобы поместить второй вызов в функцию завершения первого, но второй вызов имеет большую обработку, и я не хотел хоронить весь этот код в функции завершения. Если есть чистый способ сделать с помощью when () и т. Д., Я бы предпочел сделать это.

guest271314 · Accepted Answer · 2014-11-07T15-53-00.000Z

Пытаться

var f1 = function () {
    return $.post("ajax.php", {op : "get_folders"});
}
, f2 = function () {
    var dfd = new $.Deferred();
    $("#galleryContent")
        .load("ajax.php", {
            op : "get_thumbs"
    }, function (data, textStatus, jqxhr) {
        dfd.resolve(data, textStatus, jqxhr)
    });
    return dfd.promise()
}
, requests = [f1, f2]
, request = function (arr) {
    return $.when(arr[0]())
        .then(function (data, textStatus, jqxhr) { // 'done' callbacks
           console.log(
             typeof data === "string" 
             ? data : data[0]
             , textStatus, jqxhr
           );
           if (arr.length !== 1) {
              arr.shift();
              request(arr)
           }
        }, function (jqxhr, textStatus, errorThrown) { // 'fail' callbacks
            console.log(jqxhr, textStatus, errorThrown)
        })
};

request(requests);

jsfiddle http://jsfiddle.net/guest271314/ruoq3kf5/