使用 tumblr API(JSON） 和 $.getJSON 从我的 tumblr 博客中获取最新文章

Using tumblr API (JSON) and $.getJSON to grab the most recent posts from my tumblr blog

本文关键字：tumblr 我的 获取 最新文章 API JSON 使用 getJSON      更新时间：2023-09-26

>我无法从格式化为 JSON 的 tumblr 中提取内容。我从tumblr注册了一个API密钥，并有正确的API链接，但在$.getJSON中缺少一些东西。下面我将展示我的JSON和jQuery的外观。

这是我的 JSON 的样子：

{
"meta": {
    "status": 200,
    "msg": "OK"
},
"response": {
    "blog": {
        "title": "BLOG TITLE",
        "name": "BLOG NAME",
        "posts": 96,
        "url": "http://BLOGTITLE.tumblr.com/",
        "updated": 1370605005,
        "description": "BLOG DESCRIPTION",
        "ask": false,
        "ask_anon": false,
        "is_nsfw": false,
        "share_likes": true,
        "likes": 0
    },
    "posts": [
        {
            "blog_name": "BLOG NAME",
            "id": 52373434879,
            "post_url": "POST URL",
            "slug": "POST SLUG",
            "type": "photo",
            "date": "2013-03-07 11:36:44 GMT",
            "timestamp": 1370605004,
            "state": "published",
            "format": "html",
            "reblog_key": "T0m0e51u",
            "tags": [],
            "short_url": "SHORT URL",
            "highlighted": [],
            "note_count": 1,
            "caption": "PHOTO CAPTION TEXT DESCRIPTION",
            "image_permalink": "http://BLOGTITLE.tumblr.com/image/52373434879",
            "photos": [
                {
                    "caption": "",
                    "alt_sizes": [
                        {
                            "width": 640,
                            "height": 960,
                            "url": "http://31.media.tumblr.com/.../...jpg"
                        },
                        {
                            "width": 500,
                            "height": 750,
                            "url": "http://31.media.tumblr.com/.../..._500.jpg"
                        },
                        {
                            "width": 400,
                            "height": 600,
                            "url": "http://24.media.tumblr.com/.../..._400.jpg"
                        },
                        {
                            "width": 250,
                            "height": 375,
                            "url": "http://31.media.tumblr.com/.../..._250.jpg"
                        },
                        {
                            "width": 100,
                            "height": 150,
                            "url": "http://24.media.tumblr.com/.../..._100.jpg"
                        },
                        {
                            "width": 75,
                            "height": 75,
                            "url": "http://24.media.tumblr.com/.../..._75sq.jpg"
                        }
                    ],
                    "original_size": {
                        "width": 640,
                        "height": 960,
                        "url": "http://31.media.tumblr.com/.../..._1280.jpg"
                    }
                }
            ]
        },

这是我的jQuery的样子：

jQuery(document).ready(function(){
var url = "http://api.tumblr.com/v2/blog/BLOGNAME.tumblr.com/posts?api_key=APIKEY&limit=5";
var src;
var caption;
$.getJSON(url, function(results){
$.each(results.response, function(i,item){
    src = "posts.photos.alt_sizes.url";
    caption = posts.caption;
    $("<img/>").attr("src", src).appendTo("#submissions").wrap('<div class="postImage"></div>').after('<span class="postCaption">' + caption + '</div>');
});

.HTML：

<div id="submissions"></div>

我很确定问题出在 $.getJSON 或 $.each 中，但我无法弄清楚到底是什么。有什么帮助吗？

谢谢。

您可能会

收到错误，因为您正在尝试访问未定义的变量post。 并且您正在迭代results.response，但看起来您想迭代results.response.posts，这是一系列博客文章。

此外，每个帖子似乎都有一个photos数组，您必须从中选择具有所需照片大小的元素。

例：

$.each(results.response.posts, function(i, item){
    var src = item.photos[0].alt_sizes[0].url; // first picture, first size
    var caption = item.caption;
    $("<img/>").attr("src", src).appendTo("#submissions").wrap('<div class="postImage"></div>').after('<span class="postCaption">' + caption + '</div>');
});

当然，如果帖子没有照片并且数组为空，您将收到运行时错误，但我认为您会考虑这些情况。

另一个问题是你不能向tumblr API发出Ajax请求，因为它是一个外部域。但是，tumblr API 支持 JSONP，所以如果你在 URL 中添加&callback=?，你告诉 jQuery 改用 JSONP：

var url = "[...]/posts?api_key=APIKEY&limit=5&callback=?";

我建议阅读一些基本的JavaScript教程，学习如何使用数组和对象：

  • 雄辩的JavaScript - 数据结构：对象和数组
  • MDN - 使用对象
  • MDN - 预定义核心对象：数组对象
相关文章：