无法存储使用jQuery获取的数据JSONP

我想通过使用JSONP的jQuery AJAX调用从Flickr获取一堆照片数据，但我不想马上使用这些数据。相反，我想保留它以备后用。在一个复杂的情况下，我想让用户对预取数据执行不同的查询。在更简单的情况下，我希望每次用户单击按钮时加载下一个n图像。无法存储使用jQuery获取的数据JSONP

现在，我测试略低于最基本的功能，它是由最好的答案适应了这个问题：JQuery - Storing ajax response into global variable

然而，检索到的JSON数据是没有得到存储在jsonData变量，因为它应该。我把警报语句调试，奇怪的是，getData（）警报在回调函数中的警报之前被触发。这是为什么发生？

var dataStore = (function() { 
    var jsonData; 

    $.ajax({ 
    type: "GET", 
    url: "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", 
    dataType: "json", 
    data: { 
     tags: "dog", 
     tagmode: "any", 
     format: "json" 
    }, 
    success: function(data) { 
     jsonData = data; 
     alert(jsonData); 
    } 
    }); 

    return { getData : function() 
    { 
     if (jsonData) return jsonData; 
     else alert("no data!"); 
    }}; 
})(); 

var stuff = dataStore.getData(); 

$.each(stuff.items, function(i,item) { 
    $("<img/>").attr("src", item.media.m).appendTo("#images"); 
    if (i == 3) return false; 
});

来源

2011-12-02 stephjang

最好在Stack Overflow的每个问题上询问** 1 **问题。在上面，你问了两个截然不同的问题：1）为什么你的代码不能像你期望的那样工作，并且单独地2）你应该这样做还是放入隐藏的图像。混淆问题会降低问题及其答案的质量，最好将其分解。 –

我明白了，谢谢你的提示。现在我应该把它分开吗？ – stephjang

'@ stchangg'：我可能会，是的。由于这里的其他答案解决了“为什么这个代码没有正确工作”的方面，所以我会在这里留下那部分内容并单独询问图像最佳实践问题。我可以复制与此相关的部分答案。 –

...并且奇怪的是，的getData（）警报在回调函数的警报之前触发。这是为什么发生？

因为在一般Ajax调用，默认情况下，异步 —和JSONP调用总是由它们的性质异步（其他类型的AJAX调用可以进行同步，但它通常是一个坏主意）。

这意味着JSONP请求完成之前，你的

var stuff= dataStore.getData();

行执行。这也是为什么它在jsonData中没有看到任何东西。

您需要将JSONP调用结果的任何处理移动到请求的success回调调用中。

来源

2011-12-02 08:14:52

谢谢！我希望我可以upvote，但我没有足够的代表点。 – stephjang

问题是stuff是undefined当$.each运行时，因为stuff尚未完成运行。一切都需要在回调中。有很多方法可以解决这个问题，从最丑陋的做法setInterval()，检查是否stuff === undefined，如果不是，然后它$.each到更多的JS本地方式使用回调。

就个人而言，我强烈建议您更有效地使用回调。这是我会做的。这应该会让你走上正轨。很明显，这是很多人造代码，但可以根据需要轻松修改。

var cachedImageData = {}; //To check if data exists for the search term 

var displayImages = function(stuff){ 
    $.each(stuff.items, function(i,item) { 
    $("<img/>").attr("src", item.media.m).appendTo("#images"); 
    if (i == 3) return false; 
    }); 
} 

$('button').bind('click',function(){ //Triggers the ajax... 
    if(cachedImageData[$('input').val()] === undefined){ //If this search doesn't exist... 
    $.ajax({ 
     url:'' 
     data:{ tag: $('input').val() }, //Get the value however 
     success: function(data){ 
     cachedImageData[$('input').val()] = data; //Save for later 
     displayImages(data); //Run the display images function which is your $.each() 
     } 
    }); 
    } 
});

来源

2011-12-02 08:16:47

感谢您的回答。但是... cachedImageData被添加到哪里？ – stephjang

已更新。一旦获得数据，您就可以保存。 –

无法存储使用jQuery获取的数据JSONP

回答

相关问题