Получение данных в пустой массив и отображение результатов поиска с помощью giphy API - PullRequest
Новая
       28

Получение данных в пустой массив и отображение результатов поиска с помощью giphy API

0 голосов
/ 28 августа 2018

У меня возникают проблемы с обновлением страницы при поиске нового gif-файла в приложении, которое я создал с использованием giphy API. Вместо обновления для отображения нового поиска оно отображается в нижней части предыдущего поиска, поэтому вы в конечном итоге придется прокрутить весь путь вниз, чтобы просмотреть результат. Вот мой код. 

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 голосов
/ 28 августа 2018

Если вы хотите заменить предыдущий результат, используйте .html вместо .append. И еще одна вещь, которую вы получаете GIF через ваш URL, и я думаю, что вы получаете слишком много GIF, которые пытаются быть обработаны и занимает много времени. Но когда вы запрашиваете другой запрос на получение перед завершением предыдущего запроса, ваш DOM пытается отобразить предыдущий gif, в то время как новый gif продолжает поступать. Таким образом, если вы получаете новый gif до отображения предыдущего gif, это означает, что ваш новый gif будет отображаться после предыдущего gif, даже если вы используете .empty или .html, потому что ваше предыдущее событие все еще выполняется. Будьте осторожны, пока вы играете с элементом DOM, и старайтесь не загружать все картинки одновременно, используйте нумерацию страниц.

0 голосов
/ 28 августа 2018

Вы можете использовать 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;'/>")
}
});
 }
0 голосов
/ 28 августа 2018

Попробуйте это 

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>
0 голосов
/ 28 августа 2018 
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;'/>")
}
});
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...