javascript - XMLHttpRequest，使用超过 1 个是行不通的，只是第一个。需要使用多个

Question

为什么在这段代码中它只加载第一个脚本？由于某种原因，接下来的那些不会加载，我尝试了不同的组合但没有任何效果，我试图更改变量名称，代码中的值，但没有任何使代码工作。我应该更改什么以使脚本一次又一次地工作？像一个循环。

<label for="img1" class="container1">
     <img src="img/cover/1.jpg" alt="" class="container1">
     <div>
     <input id="img1" type="radio" name="img-descr">
     <div>
         <p id="Title1"></p>
         <p id="Runtime1"></p>
         <p id="Plot1"></p>
         <script>
             var xhttp = new XMLHttpRequest();
             xhttp.onreadystatechange = function() {
                 if (xhttp.readyState == 4 && xhttp.status == 200) {
                    var fullMovie = JSON.parse(xhttp.responseText)
                    var movie = { title: fullMovie.Title, runtime: fullMovie.Runtime, plot: fullMovie.Plot,};
                    document.getElementById('Title1').innerText = movie.title;
                    document.getElementById('Runtime1').innerText = movie.runtime;
                    document.getElementById('Plot1').innerText = movie.plot;
                    }
                    };
                    xhttp.open("GET", "http://www.omdbapi.com/?i=tt3322364&plot=short&r=json", true);
                    xhttp.send();
        </script>
    </div>
</div>
</label>
<label for="img2">
    <img src="img/cover/2.jpg" alt="" class="container1">
    <div>
        <input id="img2" type="radio" name="img-descr">
        <div>
            <p id="Title2">Title2</p>
            <p id="Runtime2">Title2</p>
            <p id="Plot2"></p>
            <script>
                var xhttp2 = new XMLHttpRequest();
                xhttp2.onreadystatechange = function() {
                    if (xhttp2.readyState == 4 && xhttp2.status == 200) {
                        var fullMovie2 = JSON.parse(xhttp2.responseText)
                        var movie2 = { title2: fullMovie2.Title, runtime2: fullMovie2.Runtime, plot2: fullMovie2.Plot,};
                                        document.getElementById('Title2').innerText = movie2.title2;
                document.getElementById('Runtime2').innerText = movie2.runtime2;
                document.getElementById('Plot2').innerText = movie2.plot2;
                }
                };
                xhttp2.open("GET", "http://www.omdbapi.com/?i=tt1528854&plot=short&r=json", true);
                xhttp2.send();
                }
            </script>
        </div>
    </div>
</label>

Answer 1

您应该清理您的代码，以便在每个您想要获取值的地方调用一个函数。您可以在 html 的 header 部分中使用一个脚本，其功能类似于:

getMovieData( moveID, titleID, runtimeID, plotID ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
       var fullMovie = JSON.parse(xhttp.responseText)
       var movie = { title: fullMovie.Title, runtime: fullMovie.Runtime, plot: fullMovie.Plot,};
       document.getElementById(titleID).innerText = movie.title;
       document.getElementById(runtimeID).innerText = movie.runtime;
       document.getElementById(plotID).innerText = movie.plot;
    }
  };
  xhttp.open("GET", "http://www.omdbapi.com/?i=" . movieID . "&plot=short&r=json", true);
  xhttp.send();
}

然后在您的每个标签中调用它。它更干净并且可以更好地扩展并且应该消除你的错误。