使用 giphy API 获取数据到空数组并显示搜索结果答案

【问题标题】：Getting data to empty array and display search result with giphy API使用 giphy API 获取数据到空数组并显示搜索结果
【发布时间】：2018-08-28 06:07:07
【问题描述】：

当我在使用 giphy API 制作的应用程序中搜索新 gif 时，我无法刷新页面。它不会刷新以显示新搜索，而是将其显示在先前搜索的底部，以便您最终不得不一直向下滚动才能查看结果。这是我的代码。

function getData() {

 // search box
var input = $("#searchtext").val();

//API request

var xhr = $.get("http://api.giphy.com/v1/gifs/search?q=" + input + 
"+&api_key=KLtIBMAd1cMGVaZ1U3Ba9g5TRJYTsQMy&limit=30");



//promise
xhr.done(function(response) {
console.log("success got data", response);
var jiffs = response.data;

// loop
for (i in jiffs) {
  $('.inner').append("<img src='" + jiffs[i].images.original.url + "' 
 style='height:350px; width:350px;'/>")
}
});
 }

这是我的html代码

 <!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <title>Giphy</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, 
 shrink-to-fit=no">
<link rel="stylesheet" href="giphy.css">
 <!-- jquery  -->
  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" 
 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
 crossorigin="anonymous"></script>
 <script>window.jQuery || document.write('<script 
src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
<!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
rel="stylesheet">
  <!--Import materialize.css-->
 <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0- 
rc.2/css/materialize.min.css">
    <!-- cookies -->
    <script src="https://cdn.jsdelivr.net/npm/js- 
  cookie@2/src/js.cookie.min.js"></script>
  </head>
 <body class="grey darken-4">
 <!-- navbar -->
  <nav>
    <div class="nav-wrapper ">
     <ul id="nav-mobile" class="left hide-on-med-and-down">
      <li><a href="sass.html">Entertainment</a></li>
      <li><a href="badges.html">Sports</a></li>
      <li><a href="collapsible.html">Stickers</a></li>
      <li><a href="collapsible.html">Artists</a></li>
      <button class="btn purple lighten-2">Upload</button>
      <button class="btn purple lighten-2">Create</button>
    </ul>
  </div>
</nav>
<!-- header -->
  <h1 class="white-text center bold">GIPHY</h1>

 <!-- search box -->
<div class="container">
<div class="grey darken-4">
  <input class="white-text" id="searchtext" type="text" 
placeholder="Search..">
  <button class="btn waves-effect purple lighten-2 btn-large " 
id="searchgifs" type="submit" onclick="getData();">Search</button>
</div>
</div>
<div class="inner"></div>




<!-- javascript files -->
  <script src="giphy.js"></script>
  <script src="plugins.js"></script>
    <script 
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0- 
 rc.2/js/materialize.min.js"></script>
  </body>
  </html>

【问题讨论】：

标签： javascript jquery arrays ajax api

【解决方案1】：

xhr.done(function(response) {
console.log("success got data", response);
var jiffs = response.data;

// looks like you would want to clear out the current results using at this spot.
$('.inner').html("");

// loop
for (i in jiffs) {
  $('.inner').append("<img src='" + jiffs[i].images.original.url + "' 
 style='height:350px; width:350px;'/>")
}
});
 }

【讨论】：

如何使用 $('.searchresult').remove();而不是 $('.inner').html("");并添加“

【解决方案2】：

您可以使用empty() 从.inner 中删除子元素。如果这不起作用，请发布您的 html。

xhr.done(function(response) {
console.log("success got data", response);
var jiffs = response.data;


$('.inner').empty();

// loop
for (i in jiffs) {
  $('.inner').append("<img src='" + jiffs[i].images.original.url + "' 
 style='height:350px; width:350px;'/>")
}
});
 }

【讨论】：

我不明白为什么到目前为止建议的任何解决方案都不起作用 - 你能创建一个 jsfiddle 吗？
试过jsfiddle，找不到任何搜索结果。我应该使用什么搜索词？

【解决方案3】：

试试这个

function getData() {    
    // search box
    var input = $("#searchtext").val();

    //API request

    var xhr = $.get("http://api.giphy.com/v1/gifs/search?q=" + input +
        "+&api_key=KLtIBMAd1cMGVaZ1U3Ba9g5TRJYTsQMy&limit=30");
 
    //promise
    xhr.done(function (response) {
        console.log("success got data", response);
        var jiffs = response.data;
        $('.inner').html('');
        // loop
        for (i in jiffs) {
            $('.inner').append("<img src='" + jiffs[i].images.original.url + "'style='height:350px; width:350px;'/>");
        }
    });
}

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>Giphy</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="giphy.css">
  <!-- jquery  -->
  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<scriptc src = "js/vendor/jquery-3.3.1.min.js" ><\/script>')</script>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0- rc.2/css/materialize.min.css">
  <!-- cookies -->
  <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
</head>

<body class="grey darken-4">
  <!-- navbar -->
  <nav>
    <div class="nav-wrapper ">
      <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="sass.html">Entertainment</a></li>
        <li><a href="badges.html">Sports</a></li>
        <li><a href="collapsible.html">Stickers</a></li>
        <li><a href="collapsible.html">Artists</a></li>
        <button class="btn purple lighten-2">Upload</button>
        <button class="btn purple lighten-2">Create</button>
      </ul>
    </div>
  </nav>
  <!-- header -->
  <h1 class="white-text center bold">GIPHY</h1>

  <!-- search box -->
  <div class="container">
    <div class="grey darken-4">
      <input class="white-text" id="searchtext" type="text" placeholder="Search..">
      <button class="btn waves-effect purple lighten-2 btn-large " id="searchgifs" type="submit" onclick="getData();">Search</button>
    </div>
  </div>
  <div class="inner"></div>
  </body>
  </html>

【讨论】：

玛丽安请尝试使用 ctrl+f5 刷新网页。不要忘记清除缓存

【解决方案4】：

如果您想替换以前的结果，请使用 .html 而不是 .append。还有一件事是你通过你的 url 获取 gif，我认为你得到了太多的 gif，这些 gif 试图被渲染并且需要很长时间。但是，当您在完成之前的请求之前请求另一个 get 请求时，您的 DOM 会尝试呈现之前的 gif，而新的 gif 会不断出现。因此，如果您在呈现前一个 gif 之前收到新 gif，这意味着即使您使用 .empty 或 .html，您的新 gif 也会在前一个 gif 之后呈现，因为您之前的事件仍在运行。玩 DOM 元素时要小心，不要使用分页一次加载所有 gif。

【讨论】：