访问ajax之外的变量答案

【问题标题】：accessing variables outside ajax访问ajax之外的变量
【发布时间】：2011-04-11 17:04:47
【问题描述】：

我有以下代码：

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 变量，因此我可以将其放在谷歌地图的信息窗口中。不幸的是，在 ajax 之外它返回 undefined。

我尝试将 flickr 的内容移到 ajax 中，但不幸的是它会丢失一些其他信息，例如 xmlTitle 和 xmlExcerpt。

非常感谢任何帮助。

提前致谢，

戴夫。

【问题讨论】：

标签： javascript jquery ajax google-maps

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

ajax 调用是异步的，因此它不会等待响应 - 它会继续运行脚本的其余部分。在设置中传递 async:false（请参阅http://api.jquery.com/jQuery.ajax/）应该可以解决您的问题，但它会使其速度变慢，因为脚本必须等待 ajax 调用返回。

如果您尝试从成功回调中调用脚本的其余部分会更整洁 - xmlTitle 和 xmlExcerpt 在那里不可用的原因是什么？

【讨论】：

【解决方案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()
    }
});

【讨论】：

【解决方案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）。

【讨论】：

【解决方案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);

【讨论】：