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

时间：2018-08-28 06:07:07

标签： javascript jquery arrays ajax api

我在使用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>

4 个答案:

答案 0 :(得分：0)

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;'/>")
}
});
 }

答案 1 :(得分：0)

您可以使用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;'/>")
}
});
 }

答案 2 :(得分：0)

尝试这个

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>

答案 3 :(得分：0)

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

相关问题
最新问题