If you want to use remote JSON data, JSON that is not from your domain, the JSON feed must support JSONP. JSONP is just like JSON data but the data is wrapped in a Javascript function. For example, Make a JSONP response
http://yoursite.herokuapp.com/data/json?callback=myFuncResult - JSONP response
myFunc({'name':'Tony Pony'})
The AJAX function and button click are defined in the javascript file ajax_example.js.
// When the browser has finished loading all HTML, run this. jQuery(document).ready( function() { // when flickr button is clicked jQuery("button#flickrApiBtn").click( getFlickrPhotos); }); /*********************************** JSONP + Flickr Code ************************************/ var getFlickrPhotos = function() { var flickrURL = "http://api.flickr.com/services/feeds/photos_public.gne?tagmode=any&format=json"; var query = jQuery("#flickrQuery").val(); queryURL = flickrURL + "&tags=" + query; alert(queryURL); // make ajax call to flickr jQuery.ajax({ url : queryURL, type : 'GET', dataType : 'jsonp', jsonp : 'jsoncallback', success : function(response) { console.log("got a response from flickr"); console.dir(response); //display the photos displayPhotos(response.items); }, error : function(error) { alert("uhoh something happened"); } }) } var displayPhotos = function(photosArray) { newHTML = ""; for(i=0; i < photosArray.length; i++) { currentPhoto = photosArray[i]; tmpHTML = "