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的标题部分有一个脚本，其功能类似于：

//$number ="162356";
$number =$row['VendorCost'];
echo substr($number,0,2).'g '.substr($number,2,2).'s '.substr($number,4,2).'c';

然后在每个标签中调用它。它更清洁，更好地扩展，应该消除你的bug。

Answer 2

好的，他们现在都在工作。我把它们都变成了IIFE（立即调用的函数表达式）。请参阅Ben Alman's article。

(function() {

  xHR();

  function xHR() {
    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;

        xHR();

      }
    };
    xhttp.open("GET", "http://www.omdbapi.com/?i=tt3322364&plot=short&r=json", true);
    xhttp.send();
  }
})();

(function() {

  xHR2();

  function xHR2() {
    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;

        xHR2();
      }
    }
    xhttp2.open("GET", "http://www.omdbapi.com/?i=tt1528854&plot=short&r=json", false);
    xhttp2.send();
  }
})();

<label for="img1" class="container1">

  <div>
    <input id="img1" type="radio" name="img-descr">
    <div>
      <p id="Title1"></p>
      <p id="Runtime1"></p>
      <p id="Plot1"></p>

    </div>
  </div>
</label>
<label for="img2">
  <div>
    <input id="img2" type="radio" name="img-descr" class="container1">
    <div>
      <p id="Title2">Title2</p>
      <p id="Runtime2">Title2</p>
      <p id="Plot2"></p>

    </div>
  </div>
</label>
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Answer 3

有一些错误。

有一个错误的＆＃34;}＆＃34;就在最后</script>标记的上方。
有一些错误标记的变量最重要的是
xhttp变量互相破坏。

bitfiddler是正确的，你应该将脚本解压缩到一个单独的文件中。

忽略html，这里是基于你的代码的工作代码，它修复了上面列出的项目：

                            <p id="Title1"></p>
                            <p id="Runtime1"></p>
                            <p id="Plot1"></p>
                            <script>
                                var xhttp1 = new XMLHttpRequest();
                                xhttp1.onreadystatechange = function() {
                                    if (xhttp1.readyState == 4 && xhttp1.status == 200) {
                                        var fullMovie1 = JSON.parse(xhttp1.responseText)
                                        var movie1 = { title1: fullMovie1.Title, runtime1: fullMovie1.Runtime, plot1: fullMovie1.Plot};
                                        document.getElementById('Title1').innerText = movie1.title1;
                                        document.getElementById('Runtime1').innerText = movie1.runtime1;
                                        document.getElementById('Plot1').innerText = movie1.plot1;
                                    }
                                };
                                xhttp1.open("GET", "http://www.omdbapi.com/?i=tt3322364&plot=short&r=json", true);
                                xhttp1.send();
                            </script>

                            <p id="Title2"></p>
                            <p id="Runtime2"></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>

XMLHttpRequest，使用超过1不会工作，只是第一个。需要使用多个

3 个答案: