2011-11-25 127 views
3

我想鑽研的tumblr的陰暗世界的深處,無法理解,並得到了以下錯誤:jQuery的阿賈克斯 - 的tumblr API V2

Uncaught SyntaxError: Unexpected token : 

我認爲它可能是因爲我回來json,但試圖使用jsonp。這裏就是我想要送:

$(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); 
    }, 
}); 
}); 

我得到一個200 OK響應和數據,但仍出現上述錯誤(這我不明白,想知道更多關於)

Tumblr也很好地指出以下內容,但我不清楚具體情況。

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.

任何幫助將是真棒,謝謝!

+0

爲什麼你甚至關心jsonp?只需使用json響應... –

+1

如果我使用JSON,我得到以下內容: XMLHttpRequest無法加載http://api.tumblr.com/v2/blog/MYTUMBLRNAME.tumblr.com/info?api_key=APIKEY。 Access-Control-Allow-Origin不允許源http://0.0.0.0:3000。 – Galaxy

+0

哦對,這很有道理 –

回答

7

做什麼的tumblr告訴你 - 一個回調函數的名字添加到請求

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

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

編輯:console.log事情是一個語法錯誤,因爲我實際上沒有測試這個代碼。

成功會怎樣?我不知道。試着找出:)它可能會被調用,但數據參數可能爲空或什麼的。 這裏的問題是,jQuery將其命名爲回調參數callback,其中Tumblr期待jsonp。在200響應jQuery可能只是eval() s的迴應,這就是爲什麼myJsonpCallback實際上被稱爲。

+0

這有效!一個問題,現在如何與'成功'功能結合使用? – Galaxy

+0

@Galaxy更新了答案。 –

+0

我知道這是一箇舊的回覆,但它出現在搜索的頂部。想要添加一些信息:你仍然需要指定'dataType:「jsonp」';但是,Tumblr API現在接受「回調」參數,因此您不再需要這樣做。提供您的API調用所需的所有內容(在本例中,只是'api_key'),然後讓成功回調處理其餘部分。如果你願意,你仍然可以在外部定義「myJsonpCallback」(這通常是很好的做法),但是從成功中調用它。 –

3

如果你不想使用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); 
} 

我創建簡單的函數用於此目的:

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

如何使用它: jsonpRequest ({抵消:50,限制:5});

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

替代用法: jsonpRequest({偏移量:50,極限:5,回調: 「nameOfMyAmazingCallbackFunction」});

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