Question

我设置了一个查询Instagram API并显示图片的链接。我想要它，所以当我再次点击链接时，它会刷新并获取更新的图像（或多个链接）。但是在第一次点击后它总是失败。

   <div class="keywords">
   <p id="olympics"><a href="#">#olympics</a></p>
   <p id="london"><a href="#">#london</a></p>
   </div>

这是我的JS：

  $(".keywords").live('click',function()

  {        
      $.ajax({
      type: "GET",
      dataType: "jsonp",
      cache: false,
      url: "https://api.instagram.com/v1/tags/olympics/media/recent?client_id=XXXXXXXXX&access_token=XXXXXXXXXXXXX",
      success: function(data) {
          for (var i = 0; i < 10; i++) {
              $(".pics").append("<a target='_blank' href='" + data.data[i].link +
              "'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
                                      }
                              }                

      })
  }
  );

Answer 1

当处理第一个结果时，你可能会收到一个javascript错误，因为你的for循环运行10次，无论返回什么结果。这可能会阻止第二个请求运行。

尝试将成功回调的内容更改为：

for (var i = 0; i < data.data.length; i++) {
    $(".pics").append("<a target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
}

我将10更改为data.data.length，这样它只会循环返回的结果数。

如果您只想显示最多10个，请执行以下操作：

for (var i = 0; i < data.data.length && i < 10; i++) {
    $(".pics").append("<a target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
}

Answer 2

工作样本： http://jsfiddle.net/h6NgP/

您只是有一个括号错误;）次要语法的事情。在jsfiddle第一次工作

Answer 3

我发现这个问题

for (var i = 0; i < 10; i++) {

你已经硬编码了10。你确定每次都在为“新鲜”的图像列表打算吗？或者可能是新图像被附加到JSON并且您没有看到这只是因为您只迭代它10次。

第一次点击后jQuery ajax失败

3 个答案: