我试图通过使用JSONP的jQuery AJAX调用从Flickr获取一堆照片数据,但我不想立即使用这些数据.相反,我想保留它以供日后使用.在一个复杂的情况下,我想让用户对预取的数据执行不同的查询.在更简单的情况下,我想在每次用户单击按钮时加载下n个图像.
现在,我正在测试下面最基本的功能,它是根据这个问题的最佳答案改编的:JQuery – Storing ajax response into global variable
但是,检索到的JSON数据不会存储在jsonData变量中.我将alert语句调试,奇怪的是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;
});
解决方法:
…and the strange thing is that the getData() alert is triggered before the alert in the callback function. Why is this happening?
因为默认情况下ajax调用是异步的 – 而且JSONP调用本质上总是异步的(其他类型的ajax调用可以同步,但通常是个坏主意).
这意味着你的
var stuff= dataStore.getData();
line在JSONP请求完成之前执行.这也是它在jsonData中看不到任何内容的原因.
您需要将JSONP调用结果的任何处理移动到从请求的成功回调调用的内容中.