Question

所以我正在尝试构建一个tumblr站点，该站点将能够自动分页，与colorbox集成并通过jQuery.ajax加载标记的元素并将它们加载到Dom。

我正在获取jsonp响应，我正好解析它，然后当我追加时，我得到一个控制台日志，告诉我该文件是被禁止的。我想我需要通过我的api密钥与图像的请求，但我不知道如何做到这一点。

我的代码如下。

$.ajax({
  url: 'http://api.tumblr.com/v2/blog/ryansimmonsiscool.tumblr.com/posts/photo?api_key=myApikey&limit=6',
  dataType: 'jsonp',
  success: function(results) {
    console.log(results);
    var posts = results.response.posts;
    $.each(posts, function(i, posts) {
      //console.log(this.photos);

      var photos = this.photos;

      $.each(photos, function(i, photos) {
        console.log(this.alt_sizes[3].url);
        var thumb = '<img src=' + this.alt_sizes[3].url + '/>';
        $('#contSlug').append(thumb);
        console.log(this.original_size.url);
        var fullres = '<img src=' + this.original_size.url + '/>';
        $('#contSlug').append(fullres);
      });
    });
  }
});

编辑：我也尝试定义我的$ .ajaxSetup以包含我的api_key，以便在附加图像并且客户端向服务器询问数据时，使用get方法中的api_key检索它（下面的代码）但是我我仍然得到403和破碎的链接。

$.ajaxSetup({
  data: {
    api_key:'example-api-key'
  }
});

Answer 1

您可以将请求中的请求类型和数据设置为变量type（根据需要设置为“获取”或“发布”）。然后创建一个data对象并在该对象中设置请求变量。这将使用type中指定的方法传递给服务器。

$.ajax({
type: "get",
data: {
        api_key:myAPIKeyGoesHere,
        limit:6
},
url:'http://api.tumblr.com/v2/blog/ryansimmonsiscool.tumblr.com/posts/photo',
cache: false,
dataType: 'jsonp',
success: function(results){
    console.log(results);
    var posts = results.response.posts;
    $.each(posts, function (i, posts){

        //console.log(this.photos);

        var photos = this.photos;

        $.each(photos, function (i, photos) {
            console.log(this.alt_sizes[3].url)
            var thumb = "<img src="+this.alt_sizes[3].url+"/>";
            $("#contSlug").append(thumb);
            console.log(this.original_size.url)
            var fullres = "<img src="+this.original_size.url+"/>";
            $("#contSlug").append(fullres);
            })
        })
}
 });

希望这有帮助。

Answer 2

我遇到了同样的问题......不确定是否存在同样的问题，但在我的情况下，图片标签中的结尾斜线是什么抛出它，所以更改上面的内容如下：

var fullres = "<img src="+this.original_size.url+">";

我使用underscore.js模板做类似的事情，结果像这样：

<img src=<%= post.photos[0].alt_sizes[0].url %>>

除此之外我们的代码使用ajax等是相同的。

403在jQuery调用后尝试使用Tumblr图像时禁止响应

2 个答案: