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);

我正在尝试访问ajax之外的flickrImages变量，因此我可以将它放在一个infowindow for google maps中。不幸的是，在ajax之外它返回undefined。

我尝试将flickr内容移动到ajax中，但遗憾的是它丢失了一些其他信息，如xmlTitle和xmlExcerpt。

非常感谢任何帮助。

提前致谢，

戴夫。

Answer 1

flickrImages未定义注释所在的原因是因为对$.ajax的调用是异步的，这意味着在请求完成之前它不会阻塞。

这就是为什么有一个success函数在底层HTTP请求完成时被“回调”。因此，您需要处理flickrImages函数中的success变量，或者从success函数处理flickrImages函数，将{{1}}传递给您处理的其他函数。< / p>

Answer 2

ajax调用是异步的，所以它不会等待答案 - 它将继续运行其余的脚本。在设置中传递async：false（请参阅http://api.jquery.com/jQuery.ajax/）可以解决您的问题，但由于脚本必须等待ajax调用返回，因此速度会慢很多。

当您尝试执行时，从成功回调中调用脚本的其余部分会更简洁 - xmlTitle和xmlExcerpt在那里是不可用的？

Answer 3

在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()
    }
});

Answer 4

正如Karl Agius所说，“ajax呼叫是异步的”。为此你只需要添加

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回调（检查here）。

Answer 5

这是另一种选择。您创建一个返回像这样的ajax调用的函数。

 function flickrImages (){
 return $.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"
});
}

然后在代码的某处，将该函数称为成功检索，或者在我的情况下，是这样的.done（）函数

var result= flickrImages ();
   flickrImages = [];
   result.done(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 + '">';
    });
 });
console.log (flickrImages);

访问ajax之外的变量

5 个答案: