代码之家 › 专栏 › 技术社区 › Zach Saucier

允许其他页面访问我的汤博乐博客内容

httpcontent tumblr jsonp api ajax

1

Zach Saucier · 技术社区 · 11 年前

我正试图使用我在另一个网页上写的脚本从我的汤博乐博客中复制所有实际内容,但我在访问这些内容时遇到了一些麻烦。 ~~我的ajax调用如下:~~

$.ajax({
     url: "http://solacingsavant.tumblr.com/",
     dataType: 'jsonp',
     success: function(data) {
          var elements = $("<div>").html(data)[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
          for(var i = 0; i < elements.length; i++) {
               var theText = elements[i].firstChild.nodeValue;
               alert(theText); // Alert if I got something
              // This is where I'll strip the data for the items I want
          }
     }
});

但事实上,控制台给了我一个错误,“资源被解释为脚本,但使用MIME类型text/html传输” I looked into here 并更改了相应的 meta 在我博客的HTML中标记到 <meta http-equiv="Content-Type" content="application/javascript; charset=utf-8" /> 没有成功

我也试过使用 dataType: 'html' (这对我来说更有意义),但我收到了一个控制台错误,“访问控制允许起源不允许起源” which I also looked into 并在我的汤博乐博客中添加了一个元标签 <meta Access-Control-Allow-Origin="*" /> ,但再次失败

Here is a jsFiddle to work with

我的方法不起作用吗?因为汤博乐作为一个整体不允许更改 Access-Control ? 如果是,我该如何解决这个问题?如果没有,我做错了什么?

主要编辑(基于mikedidthis的有益评论)

如果没有Tubmlr API,我似乎无法做到这一点,所以我获得了一个API密钥,现在可以访问API发送的json结果。我可以在控制台中使用API密钥来获取一个jsonp对象。我现在的javascript:

$.ajax({
    url: "http://api.tumblr.com/v2/blog/solacingsavant.tumblr.com/info?api_key=APIkeyGoesHeRe",
    dataType: 'jsonp',
    success: function(results){
        console.log(results); 
        // Get data from posts here
    }
});

This SO post 有助于理解我如何改变我的Tubmlr页面上的数据,并了解有关该网站的基本信息,但不了解如何从单个帖子中获得实际数据。我试着透过 results 对象,无法找到任何与帖子相关的数据,也无法将结果附加到jsfiddle中。所以我现在的问题是, “我可以使用这种方法从单个帖子中复制数据(比如帖子中的书面文本)吗?如果可以,如何复制?如果不能,我应该使用其他什么方法?”

1 回复 | 直到 7 年前

1

5

mikedidthis 11 年前

一个非常快速的答案

tumblrAPI文档确实很好地涵盖了API的使用,然而,为了给您一个小的开始,让我们获取所有的文本帖子。

首先,您需要在API中查询任何类型的帖子文本 .

文件说明( http://www.tumblr.com/docs/en/api/v2#posts )我们应该使用以下url并指定类型我们将为您设置 text :

api.tumblr.com/v2/blog/solacingsavant.tumblr.com/posts[/type]

下面是一个基于OP fiddle的例子。

$.ajax({
    url: "http://api.tumblr.com/v2/blog/solacingsavant.tumblr.com/posts/text?api_key=XXXXXXX",
    dataType: 'jsonp',
    success: function(data){
        posts = data.response.posts
        $.each(posts, function(i) {
            console.log( posts[i].title, posts[i].body )
        });
    }
});

因此,对于API的每个查询,我们都会收到一个对象。您需要筛选此对象以从中获取所需的数据。

在帖子查询的上下文中,您可以使用 data.response.posts 对象

为了了解每种帖子类型的可用数据,文档涵盖了以下内容: http://www.tumblr.com/docs/en/api/v2#text-posts

到每个的内容文本帖子类型,您需要循环浏览 posts 对象,然后获取名为 title 和 body .

此处示例: http://jsfiddle.net/ZpFwL/

奖金时间 可以通过删除 type 来自URL:

http://api.tumblr.com/v2/blog/solacingsavant.tumblr.com/posts/?api_key=XXXXXXX "

请记住,这是一个非常快速的例子,不适用于现实世界。