$.getJSON syntax issue

Question

I'm about to rip out my eyes and eat them. I'm trying to pull data from flickr and apparently I have no idea what I'm doing.

This works:

var flickrAPI = "https://api.flickr.com/services/rest/api_key=xxxxx";
$.get(flickrAPI, 
{
method: "flickr.photosets.getList",
format: "json",
user_id: "xxxxx"
}, alert("ok")
);

And I am alerted "ok" However when I try to use function() {} in place of alert()...

var flickrAPI = "https://api.flickr.com/services/rest/api_key=xxxxx";
$.get(flickrAPI, 
{
method: "flickr.photosets.getList",
format: "json",
user_id: "xxxxx"
}, function(data) {alert("ok");}
);

Nothing happens.

Also, if I assign the return value of $.get to a variable, I'm left with the following JSON object:

{"readyState" : "1"}

which is not what I'm looking for. any ideas? It might be worth noting that the html file I'm working with is a local file.

Thanks

Answer 1

You cannot retrieve data from another host using AJAX because of the same-origin policy.

It may be possible to use jsonp if the other host supports it. It is explained how to use jsonp with jQuery in the jQuery manual. In the specific case of Flickr there is a blogpost explaining how to use jsonp with flickr.

Answer 2

Since it is API I asume it has Access-Control-Allow-Origin header, so this should work

$.ajax({
  url: "https://api.flickr.com/services/rest/api_key=xxxxx",
  data: {
    method: "flickr.photosets.getList",
    format: "json",
    user_id: "xxxxx"
    },
  success: function(data) {alert("ok");},
  dataType: "json"
});