为什么这个简单的 JavaScript 程序只获取 1 个结果而不是我请求的指定的 25 个结果？

Question

我使用 Flickr API 创建了一个简单的单页应用程序，根据在搜索框中键入的关键字显示 25 张图像。每个新搜索都应替换 div 内以前的搜索结果。它有效，但是，我只得到一张图像 post 而不是我请求 "per_page" 的 25 张图像。

我最初尝试使用 append 方法获得了我的 25 张图像，但是正如预期的那样，它没有在每次新搜索时刷新，而是将新结果添加到先前结果的底部。我也尝试了 empty() 方法来清除结果，但我仍然只得到一张图像到 post。然后我尝试了 .replaceWith() 并没有得到任何结果。我开始问自己是否是我的代码顺序导致了问题。

编辑：如果我使用“.append”而不是“.html”，这会起作用，但是它不会清除#images div 并替换旧数据。

<body>
  <div class="navbar">
     <input type="text" id="content">
     <button id="submit", type="submit" class="button">GO!</button>
  </div>
  <div class="container">
     <div id="images"></div>
  </div>
  <!--script-->
  <script>
     $(document).ready(function () {
       $("#submit").click(function (event) {
         var searchVal = $("#content").val();
         var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=//KEY_GOES_HERE//c&nojsoncallback=1";
         $.getJSON( flickrAPI, {
           tags: searchVal,
           per_page: 25,
            //safeSearch
           safe_search: 1,
           format: "json"
         },  
           function( data ) {
           $.each( data.photos.photo, function( i, item ) {
             var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';                

            $('#images').html('<img src="' + url + '"/>');
          });

        });
     });    
     });
  </script>

我的预期结果是根据在搜索框中输入的内容在 Flickr API post 中获得 25 张图片。如果用户执行新的搜索，25 个新结果将替换以前的结果。

Answer 1

在遍历 return 数据之前清空 #images 元素。然后将循环内的每个元素附加到#images div

<body>
  <div class="navbar">
     <input type="text" id="content">
     <button id="submit", type="submit" class="button">GO!</button>
  </div>
  <div class="container">
     <div id="images"></div>
  </div>
  <!--script-->
  <script>
     $(document).ready(function () {
       $("#submit").click(function (event) {
         var searchVal = $("#content").val();
         var flickrAPI = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=//KEY_GOES_HERE//c&nojsoncallback=1";
         $.getJSON( flickrAPI, {
           tags: searchVal,
           per_page: 25,
            //safeSearch
           safe_search: 1,
           format: "json"
         },  
           function( data ) {
           $('#images').empty(); //clear div here
           $.each( data.photos.photo, function( i, item ) {
             var url = 'https://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';                

            $('#images').append('<img src="' + url + '"/>'); //append data here
          });

        });
     });    
     });
  </script>

为什么这个简单的 JavaScript 程序只获取 1 个结果而不是我请求的指定的 25 个结果？

Why is this simple JavaScript program only fetching 1 result instead of the specified 25 I'm requesting?

javascript

api

ajax

json

flickr