时间戳

首页 > 解决方案 > 使用 giphy API 获取数据到空数组并显示搜索结果

javascript - 使用 giphy 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>

标签： javascriptjqueryarraysajaxapi

解决方案

试试这个

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>

推荐阅读