доступ к переменным вне ajax

Question

У меня есть следующий код:

var src, flickrImages = [];

$.ajax({
    type: "GET",
    url: "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=bf771e95f2c259056de5c6364c0dbb62&text=" + xmlTitle.replace(' ', '%20') + "&safe_search=1&per_page=5&format=json",
    dataType: "json",
    statusCode: {
        404: function() {
                    alert('page not found');
                }
    },
    success: function(data) {
        $.each(data.photos.photo, function(i,item){
            src = "http://farm"+ item.farm +".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_s.jpg";
            flickrImages[i] = '<img src="' + src + '">';
        });
    }
});

// undefined returned here for flickrImages

map.setZoom(13);
map.setCenter(new google.maps.LatLng(xmlLat,xmlLng));
infowindow.setContent('<strong>' + xmlTitle + '</strong><br>' + xmlExcerpt + '<br><br>' + flickrImages.join(''));
infowindow.open(map,this);

Я пытаюсь получить доступ к переменной flickrImages вне ajax, поэтому я могу поместить ее в информационное окно для карт Google.К сожалению, вне ajax он возвращает неопределенное значение.

Я попытался переместить вещи flickr в ajax, но, к сожалению, он потерял некоторую другую информацию, такую ​​как xmlTitle и xmlExcerpt.

Любая помощь очень ценится.

Заранее спасибо,

Дейв.

Answer 1

Причина, по которой flickrImages не определена там, где находится ваш комментарий, заключается в том, что вызов $.ajax является асинхронным, что означает, что он не блокируется до тех пор, пока ваш запрос не завершится.

Вот почему существует success функция, которая «перезванивается» при завершении основного HTTP-запроса.Итак, вам нужно обработать переменную flickrImages из функции success или, альтернативно, из функции success передать flickrImages другой функции, которая выполняет вашу обработку.

Answer 2

Ajax-вызов асинхронный, поэтому он не будет ждать ответа - он просто продолжит работу и запустит оставшуюся часть сценария. Передача async: false в настройках (см. http://api.jquery.com/jQuery.ajax/) должна решить вашу проблему, хотя это сделает ее намного медленнее, так как сценарию придется ждать возврата вызова ajax.

Было бы лучше, если бы остальная часть сценария вызывалась из обратного вызова успеха, как вы пытались это сделать - как получается, что xmlTitle и xmlExcerpt там недоступны?

Answer 3

Как сказал Карл Агиус: «Аяксный вызов асинхронный».Для этого вам просто нужно добавить

async: false,

к вашему запросу ajax.Вот ваш код выглядит после добавления этого:

$.ajax({
    type: "GET",
    url: "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=bf771e95f2c259056de5c6364c0dbb62&text=" + xmlTitle.replace(' ', '%20') + "&safe_search=1&per_page=5&format=json",
    dataType: "json",
    async: false,
    statusCode: {
        404: function() {
                    alert('page not found');
                }
    },
    success: function(data) {
        $.each(data.photos.photo, function(i,item){
            src = "http://farm"+ item.farm +".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_s.jpg";
            flickrImages[i] = '<img src="' + src + '">';
        });
    }
});

Но не рекомендуется останавливать асинхронный вызов ajax.Но будет работать на вас.Вместо этого используйте успешный обратный вызов Ajax (отметьте здесь ).

Answer 4

Определите глобальную переменную вне вашего вызова ajax и присвойте ей значение

var myData

$.ajax({
    type: "GET",
    url: "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=bf771e95f2c259056de5c6364c0dbb62&text=" + xmlTitle.replace(' ', '%20') + "&safe_search=1&per_page=5&format=json",
    dataType: "json",
    statusCode: {
        404: function() {
                    alert('page not found');
                }
    },
    success: function(data) {
        myData = data
        myFunction()
    }
});