时间戳

首页 > 解决方案 > 无法在 API 项目中多次搜索

javascript - 无法在 API 项目中多次搜索

问题描述

我创建了一个 API 页面，用户可以在其中搜索电影，然后他们得到结果，一切正常，但如果我想搜索另一个名称，它只会搜索一次，但在刷新之前我不会得到结果页面，然后我只能搜索一次。我确定问题出在我的代码中，但我无法弄清楚。

const url = 'http://www.omdbapi.com/?apikey=123456789=';
const input = document.querySelector('input');
const movieDtl = document.querySelector('.movie-detail');
const ul = document.querySelector('ul');
let movieId = [];
let xhr;
let inputsearch;
let object;
let movieList;
let movieDetail;

input.addEventListener('keyup', getmovies);

function getmovies(e){
    e.preventDefault();
  if(e.keyCode === 13){
    inputsearch = input.value;
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
        getdatalist();
    }
   }
    var newUrl = url + encodeURIComponent(inputsearch);
    xhr.open('GET', newUrl, true);
    xhr.send();
 }
}

function getdatalist(){
    object = JSON.parse(xhr.response);
    movieList = object.Search;
    movieList.forEach(function(e){
        movieId.push(e.imdbID);
        let list = document.createElement('li');
        movieDetail = '<img src="'+e.Poster+'" alt="Poster" no-image="http://www.byustore.com/c.4325477/byu-vinson/img/no_image_available.jpeg?resizeid=2&resizeh=1200&resizew=1200"><h5>'+e.Title+'</h5><button>View More</button>';
        list.innerHTML = movieDetail;
        if(e.Poster === 'N/A'){
            list.firstChild.src = list.firstChild.getAttribute("no-image");
        }
        ul.appendChild(list);
    }) 
        getdata();
}

function getdata() {
    let vwbtn = document.querySelectorAll('ul li button');
    vwbtn.forEach(function(elem, index){
      elem.addEventListener('click', getListDetail.bind(null, index));
    })
}

function getListDetail(index){
    const secondurl = 'http://www.omdbapi.com/?apikey=12345678=';
    const mId = movieId[index];
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
     if(xhr.readyState == 4 && xhr.status == 200){
        let secObject = JSON.parse(xhr.response);
        let detailList = '<div class="movie-detail-inside"><img class="movie-poster" src="'+secObject.Poster+'" alt="Poster" no-image="http://www.byustore.com/c.4325477/byu-vinson/img/no_image_available.jpeg?resizeid=2&resizeh=1200&resizew=1200"><div id="detail-wrap"><div class="layer-1"><h5>'+secObject.Type.toUpperCase() +' '+ '-'+' '+ secObject.Year+'</h5><h5> Released'+' '+secObject.Released+'</h5><h5>'+secObject.Runtime+'</h5><h5>'+secObject.Genre+'</h5><div><img src="star.png" alt="star icon"><h5>'+secObject.imdbRating+'</h5></div></div><h2>'+secObject.Title+'</h2><div class="layer-2"><h4>Production '+' '+'<span>'+secObject.Production+'</span></h4><h4> Director '+' '+'<span>'+secObject.Director+'</span></h4><h4> Writer '+' '+'<span>'+secObject.Writer+'</span></h4><h4> Actors '+' '+'<span>'+secObject.Actors+'</span></h4><div id="story"><h4 class="storyText">Story</h4><span>'+secObject.Plot+'</span></div></div><div class="layer-3"><h4>'+secObject.Language+'</h4><h4>'+secObject.Country+'</h4><button onclick="exitdetail()">Exit</button></div></div></div>';

            movieDtl.innerHTML = detailList;
            movieDtl.style.transform = 'scale(1)';
        if(secObject.Poster === 'N/A'){
            movieDtl.firstChild.firstChild.src = movieDtl.firstChild.firstChild.getAttribute("no-image");
        }
      }
    }
    xhr.open('GET', secondurl + mId, true);
    xhr.send();
}

function exitdetail(){
 movieDtl.style.transform = 'scale(0)';

}

标签： javascripthtmlapixmlhttprequest

解决方案

它返回结果但附加在底部，ul首先尝试清除旧结果

function getdatalist() {
    ul.innerHTML = '';
    ........

推荐阅读