不能存储与jQuery JSONP获取数据

问题描述

我想通过jQ​​uery的AJAX调用使用JSONP获取一群来自Flickr照片数据的，但我不希望使用数据的时候了。相反，我想以后preserve使用它。在复杂的情况下，我想，让用户执行不同的查询在prefetched数据。在简单的情况下，我想只是每个用户点击一个按钮时加载下的 N 的图像。

现在，我在下面的测试只是最基本的功能，它是改编自这个问题的最好答案：JQuery - 存储Ajax响应为全局变量

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

  VAR数据存储=（函数（）{
  VAR jsonData;

  $阿贾克斯（{
    键入：GET，
    网址：http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=？，
    数据类型：JSON，
    数据： {
      标签：狗，
      tagmode：任何，
      格式为：JSON
    }，
    成功：功能（数据）{
      jsonData =数据;
      警报（jsonData）;
    }
  }）;

  返回{的getData：函数（）
  {
      如果（jsonData）返回jsonData;
      否则警报（无数据！）;
  }};
}）（）;

VAR的东西= dataStore.getData（）;

$每个（stuff.items，功能（I，项目）{
  $（＆LT; IMG /＆gt;中）。ATTR（src用户，item.media.m）.appendTo（＃图像）;
  如果（我== 3）返回false;
}）;
 

解决方案

由于一般的Ajax调用，在默认情况下，的同步的＆NBSP;＆mdash;和JSONP调用总是异步其性质（其他种类的AJAX调用可以进行同步，但它通常是一个坏主意）。

这意味着

  VAR的东西= dataStore.getData（）;
 

行JSONP请求完成之前执行。这也是为什么它没有看到任何 jsonData 。

您需要移动的JSONP调用结果的任何加工成的东西从成功叫请求的回调。

I'm trying to fetch a bunch of photo data from Flickr via a jQuery AJAX call using JSONP, but I don't want to use the data right away. Instead, I'd like to preserve it for use later. In a complicated case, I'd like to let users perform different queries on the prefetched data. In a simpler case, I'd like to just load the next n images each time the user clicks a button.

Right now, I'm testing just the most basic functionality below, which is adapted from the best answer to this question: JQuery - Storing ajax response into global variable

However, the retrieved JSON data is not getting stored in the jsonData variable as it should. I put the alert statements to debug, and the strange thing is that the getData() alert is triggered before the alert in the callback function. Why is this happening?

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

解决方案

Because ajax calls in general are, by default, asynchronous — and JSONP calls are always asynchronous by their nature (other kinds of ajax calls can be made synchronous, but it's generally a bad idea).

This means your

var stuff= dataStore.getData();

line executes before the JSONP request completes. This is also why it doesn't see anything in jsonData.

You need to move any processing of the JSONP call result into something called from the success callback of the request.

这篇关于不能存储与jQuery JSONP获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！