jQuery. при понимании - PullRequest
Новая
       23

jQuery. при понимании

56 голосов
/ 12 марта 2011

Я пытаюсь использовать jQuery.when, чтобы запустить два ajax запроса, а затем вызвать некоторую функцию после завершения двух запросов. Вот мой код: 

var count = 0;
var dfr;

var showData = function(data) {
    dfr.resolve();
    alert(count);
   // Do something with my data data received
};

var method1 = function() {
    dfr = $.Deferred();

    return $.ajax('localhost/MyDataService/DataMethod_ReturnsData', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: showData
    });
};

var method2 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsCount', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            count = data.d.__count;
        }
    });
};

$.when(method1(), method2())
    .then(showData());

Однако это не работает, как ожидалось. Ajax-вызов в method1 вернет данные, которые будут использоваться в showData(), а Ajax-вызов в method2 вернет count, который должен быть назначен для счетчика var, а затем использован в showData().

Но когда я запускаю приведенный выше код, вызывается method1, затем method2, а затем showData, оставляя данные в showData как 'undefined'. Как я могу добиться этого через $.when, который, насколько я знаю, происходит только тогда, когда обе функции, возвращающие $.promise, выполняются. Я хочу, чтобы оба ajax-вызова вызывались параллельно, и последующие результаты отображались на основе результатов обоих вызовов.

Ответы [ 3 ]

69 голосов
/ 13 марта 2011 
function showData(data1, data2) {
    alert(data1[0].max_id);
    alert(data2[0].max_id);
}

function method1() {
    return $.ajax("http://search.twitter.com/search.json", {
        data: {
            q: 'ashishnjain'
        },
        dataType: 'jsonp'
    });
}

function method2() {
    return $.ajax("http://search.twitter.com/search.json", {
        data: {
            q: 'ashishnjain'
        },
        dataType: 'jsonp'
    });
}

$.when(method1(), method2()).then(showData);​

Вот рабочий jsFiddle

29 голосов
/ 12 марта 2011

Проблема в том, что вы передаете showData() в then(), а не showData.Вы должны передать ссылку на функцию в .then(): 

$.when(method1(), method2())
    .then(showData);

или 

$.when(method1(), method2())
    .then(function () {
        showData();
    });

Редактировать

Я собрал рабочую демонстрацию.Частично проблема (по крайней мере, во фрагменте кода, который вы разместили) заключалась в том, что не было функции обратного вызова с именем $callback.Частично проблема заключалась в $ в имени обратного вызова '$callback'.

Итак, удалите опцию jsonp: '$callback' ajax, чтобы jQuery по умолчанию использовал функцию обратного вызова с именем callback, и определить функцию с этим именем, и все это работает.

0 голосов
/ 12 марта 2011

Я немного изменил ваш код и упростил понимание ... я не тестировал его, пожалуйста попробуйте 

var count = 0;
function countResponse(data) {
    count++;
    if(count==2)
    {
        // Do something after getting responce from both ajax request
    }
};

var method1 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsData', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            countResponse(data)
        }
    });
};

var method2 = function() {
    return $.ajax('localhost/MyDataService/DataMethod_ReturnsCount', {
        dataType: "jsonp",
        jsonp: "$callback",
        success: function(data) {
            countResponse(data)
        }
    });
};
...