Question

我试图通过玩弄它们来了解有关API的更多信息，而我现在遇到了Flickr API的问题。

进入.getJSON()的网址在我手动输入chrome并返回JSON时效果很好，但下面代码中的回调函数不起作用，这意味着.getJSON(url) isn＆＃ 39;工作。

let city='boston';

function gettingFlickrJSON(city1){
    city = city1;
    console.log(1);
    $.getJSON('https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=[my_key_which_i_left_out_for_now]&tags='+city+',city&per_page=10&format=json',function(json){
      console.log(2);
    });
}

我尝试取出

&tags='+city+',city...

并替换为示例运行，回调仍然无法正常工作。我对这个链接有99％的信心，因为正如我所说，当手动输入时，它可以正常工作。是的，我将jquery导入到我的脚本中。这是我尝试使用的方法的文档的链接，如果这有任何帮助的话。 https://www.flickr.com/services/api/flickr.photos.search.html

Answer 1

如果您计划使用jsonnocallback=1这样的响应，则需要在请求中使用参数$.getJSON，否则您必须覆盖响应方法，然后根据需要对其进行操作。

基本上，您将JSON字符串误解为JSONCallbackfunction

用于观察与parameter一起使用时是否有2个响应之间的差异。

打开2个窗口with和without附加此参数。您会发现一个返回JSON字符串，另一个返回包含{jsonFlickrApi(response)的回调函数JSON 1}} object作为参数。我已经添加了代码的示例代码段以及我的API密钥，只是为了确保它对您有效。如果您回复它，我会删除它。

如果您想学习更安全的回调函数使用方法，请参阅here

let city = 'boston';

$(document).ready(function() {
  $("#findnow").click(function() {
    $.getJSON('https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=[insert_api_key]&tags=' + city + ',city&per_page=50&format=json&nojsoncallback=1', function(res) {
      for (var key in res.photos.photo) {
        $("#results").append("<li><span class='label label-primary'>" + res.photos.photo[key]['title'] + "</span></li>");
      }
    })

  });
})

* {
  margin: 20px auto;
}

body {
  text-align: center;
}

.container {
  border: 2px dashed #000;
  max-height: 250px;
  max-width: 85%;
  overflow-x: hidden;
  overflow-y: scroll;
  text-align: left;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: block;
  line-height: normal;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button id="findnow" class="btn btn-default">find photos</button>

<div class="container">
  <p>Below are the list of the photos</p>
  <ul id="results">
  </ul>
</div>

.getJSON（）回调不会工作，但API的网址工作正常

1 个答案: