ajax/vanilla javascriptを使用してapiからデータを取得する

Question

良い一日は、入力ボックスに単語を入力して送信すると、フェッチやjqueryなどなしでjavacriptとajaxだけを使用してムービープロジェクトを作成しようとしています。はじめてapiからムービーの配列を取得しますが、他のムービーをもう一度検索しようとすると、ページがリロードされても動作しません。誰もがこのバグの解決策を持っていますか？おかげ

document.getElementById("searchForm").addEventListener("submit", loadMovies); 
 

 
function loadMovies(e) { 
 
    let input = document.getElementById("searchText"); 
 
    const xhr = new XMLHttpRequest(); 
 
    xhr.open("GET", `https://api.themoviedb.org/3/search/movie?api_key=b94d8dbb7dcd23af16414e00a058c9ad&language=en-US&query=${input.value}`, true); 
 
    xhr.onload = function() { 
 
    if (this.status === 200) { 
 
     let movies = document.getElementById("movies"); 
 
     let res = JSON.parse(this.responseText); 
 
     res.results.forEach(function(movie) { 
 
     movies.innerHTML += ` 
 
         <div class="col-md-3"> 
 
          <div class="card bg-dark"> 
 
           <div class="card-block"> 
 
            <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" class="img-fluid"> 
 
            <h4>${movie.title}</h4> 
 
            <a href="#" class="btn btn-primary">Movie Details</a> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        `; 
 
     }); 
 
    } else { 
 
     console.log("Movie not found"); 
 

 
    } 
 

 
    } 
 

 
    xhr.send(); 
 

 
    e.preventDefault(); 
 
}

<div class="container mt-5"> 
 
    <div class="jumbotron bg-dark"> 
 
    <h3 class="text-center">Search For Any Movie</h3> 
 
    <form id="searchForm"> 
 
     <input type="text" class="form-control" id="searchText" placeholder="Search Movie...."> 
 
    </form> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div id="movies" class="row"></div> 
 
</div>

Answer 1

私はあなたが表示したい多くの成果があった実現しませんでした。その場合、使用+=コースオフだけでは結果を空に事前にmovies.innerHTML = ''

document.getElementById("searchForm").addEventListener("submit", loadMovies); 
 

 
function loadMovies(e) { 
 
    let input = document.getElementById("searchText"); 
 
    const xhr = new XMLHttpRequest(); 
 
    xhr.open("GET", `https://api.themoviedb.org/3/search/movie?api_key=b94d8dbb7dcd23af16414e00a058c9ad&language=en-US&query=${input.value}`, true); 
 
    xhr.onload = function() { 
 
    if (this.status === 200) { 
 
     let movies = document.getElementById("movies"); 
 
     let res = JSON.parse(this.responseText); 
 
     movies.innerHTML = ''; 
 
     res.results.forEach(function(movie) { 
 
     movies.innerHTML += ` 
 
         <div class="col-md-3"> 
 
          <div class="card bg-dark"> 
 
           <div class="card-block"> 
 
            <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" class="img-fluid"> 
 
            <h4>${movie.title}</h4> 
 
            <a href="#" class="btn btn-primary">Movie Details</a> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        `; 
 
     }); 
 
    } else { 
 
     console.log("Movie not found"); 
 

 
    } 
 

 
    } 
 

 
    xhr.send(); 
 

 
    e.preventDefault(); 
 
}

<div class="container mt-5"> 
 
    <div class="jumbotron bg-dark"> 
 
    <h3 class="text-center">Search For Any Movie</h3> 
 
    <form id="searchForm"> 
 
     <input type="text" class="form-control" id="searchText" placeholder="Search Movie...."> 
 
    </form> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div id="movies" class="row"></div> 
 
</div>