CODEWITHSUNDEEP
ajaxjquerytumblr
Galaxy
Galaxy

Reputation: 3400

Jquery Ajax - Tumblr API v2

I'm trying to delve into the depths of the murky world of Tumblr, and can't understand how to get over the following error: 

Uncaught SyntaxError: Unexpected token :

I believe it may be because I'm getting back json, but trying to use jsonp. Here's what I'm trying to send:

$(function(){
$.ajax({
    type: "GET",
    url : "http://api.tumblr.com/v2/blog/MyTumblrName.tumblr.com/info",
    dataType: "jsonp",
    data: {
        api_key : "MyTumblrApi"
    },
    success: function(data){
        console.log(data);
    },
});
});

I get a 200 OK response, and the data but still the above error (which I don't understand and would like to know more about)

Tumblr also kindly points out the following, but I'm unclear on the specifics.

All requests made with HTTP GET are JSONP-enabled. To use JSONP, append jsonp= and the name of your callback function to the request. JSONP requests will always return an HTTP status code of 200 but will reflect the real status code in the meta field of the JSON response.

Any help would be awesome, thanks!

Upvotes: 3

Views: 5688

Answers (2)

Stepan Vrany
Stepan Vrany

Reputation: 1026

In case you don't want to use jQuery:

var tumblrFeed = document.createElement('script');
tumblrFeed.setAttribute("src", "http://api.tumblr.com/v2/blog/{blog.tumblr.com}/posts?api_key={your api key}&jsonp=callback");
document.getElementsByTagName("head")[0].appendChild(tumblrFeed)

function callback(data){
  console.log(data);
}

I've created simple function for this purpose:

function jsonpRequest(opt){
  var params = "";
  var blogName = "{your blog name}";
  var api_key = "{api key}";
  if("selector" in opt){params = "id=" + opt.selector;}
  if(("offset" in opt) && ("limit" in opt)){params = "limit=" + opt.limit + "&offset=" + opt.offset;}
  if("callback" in opt){params += "&jsonp=" + opt.callback;}else{params += "&jsonp=callback";}
  params += "&api_key=" + api_key;      


  var tumblrFeed = document.createElement('script');
  tumblrFeed.setAttribute("src", "http://api.tumblr.com/v2/blog/" + blogName + "/posts?" + params);
  document.getElementsByTagName("head")[0].appendChild(tumblrFeed)
}

How to use it: jsonpRequest({offset: 50, limit: 5});

function callback(data){do stuff here ...}

Alternative usage: jsonpRequest({offset: 50, limit: 5, callback: "nameOfMyAmazingCallbackFunction"});

function nameOfMyAmazingCallbackFunction(data){do stuff here ...}

Upvotes: 3

Ilia G
Ilia G

Reputation: 10211

Do what Tumblr is telling you to - add a callback function name to the request

myJsonpCallback = function(data)
{
    console.log(data);
}

$.ajax({
    type: "GET",
    url : "http://api.tumblr.com/v2/blog/MyTumblrName.tumblr.com/info",
    dataType: "jsonp",
    data: {
        api_key : "MyTumblrApi",
        jsonp : "myJsonpCallback"
    }
});

========================================================

EDIT: The console.log thing is a syntax error since I didn't actually test this code.

What happens to success? I don't really know. Try and find out :) It will probably be called but data parameter likely be null or something. The issue here is that jQuery names it's callback parameter callback, where as Tumblr is expecting jsonp. Upon 200 response jQuery likely simply eval()s the response, which is why myJsonpCallback is actually called.

Upvotes: 7

Related Questions