私は魔法のように動作w3schoolから、このコードを持っているHTML

ではJavaScriptを使用してJSONデータを解析繰り返す方法：私はこのようなスクリプトを繰り返したときに私は魔法のように動作w3schoolから、このコードを持っているHTML

<!DOCTYPE html> 
    <html> 
    <body> 

    <h1>Customers</h1> 
    <div id="id01"></div> 

    <script> 
    var xmlhttp = new XMLHttpRequest(); 
    var url = "http://www.w3schools.com/website/customers_mysql.php"; 

    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      myFunction(xmlhttp.responseText); 
     } 
    } 
    xmlhttp.open("GET", url, true); 
    xmlhttp.send(); 

    function myFunction(response) { 
     var arr = JSON.parse(response); 
     var i; 
     var out = "<table>"; 

     for(i = 0; i < arr.length; i++) { 
      out += "<tr><td>" + 
      arr[i].Name + 
      "</td><td>" + 
      arr[i].City + 
      "</td><td>" + 
      arr[i].Country + 
      "</td></tr>"; 
     } 
     out += "</table>"; 
     document.getElementById("id01").innerHTML = out; 
    } 
    </script> 

    </body> 
    </html>

しかし、それは動作しません：

<!DOCTYPE html> 
    <html> 
    <body> 

    <h1>Customers</h1> 
    <div id="id01"></div> 

    <script> 
    var xmlhttp = new XMLHttpRequest(); 
    var url = "http://www.w3schools.com/website/customers_mysql.php"; 

    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      myFunction(xmlhttp.responseText); 
     } 
    } 
    xmlhttp.open("GET", url, true); 
    xmlhttp.send(); 

    function myFunction(response) { 
     var arr = JSON.parse(response); 
     var i; 
     var out = "<table>"; 

     for(i = 0; i < arr.length; i++) { 
      out += "<tr><td>" + 
      arr[i].Name + 
      "</td><td>" + 
      arr[i].City + 
      "</td><td>" + 
      arr[i].Country + 
      "</td></tr>"; 
     } 
     out += "</table>"; 
     document.getElementById("id01").innerHTML = out; 
    } 
    </script> 

<h1>Buyers</h1> 
    <div id="id02"></div> 

    <script> 
    var xmlhttp = new XMLHttpRequest(); 
    var url = "http://www.w3schools.com/website/customers_mysql.php"; 

    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      myFunction(xmlhttp.responseText); 
     } 
    } 
    xmlhttp.open("GET", url, true); 
    xmlhttp.send(); 

    function myFunction(response) { 
     var arr = JSON.parse(response); 
     var i; 
     var out = "<table>"; 

     for(i = 0; i < arr.length; i++) { 
      out += "<tr><td>" + 
      arr[i].Name + 
      "</td><td>" + 
      arr[i].City + 
      "</td><td>" + 
      arr[i].Country + 
      "</td></tr>"; 
     } 
     out += "</table>"; 
     document.getElementById("id02").innerHTML = out; 
    } 
    </script> 

    </body> 
    </html>

どのような変数名を変更する必要がありますか？私はそれが働いたスクリプトをやったが、2回働かなかった。変数の変更を試みましたが、機能しませんでした。すべての変数名を変更しました。

出典

2016-08-30 Faisal

をあなたが1つのページにはなく場合は、何度も何度も同じIDを使用することはできません正確にどのようなあなたは – mean

を手の込んだことができますしたいです – mean

@Kabali - OPはHTML ID値を再利用していません。あなたは、別のHTMLとして使用しています。 – Quentin

あなたの2つのスクリプトは、同じJS環境に存在します。彼らは両方とも同じ名前のグローバル変数を作成し、お互いに干渉します。それぞれがで動作するため

ラップIIFE内の各スクリプトは、新しいスコープを作成します。

<script> 
    (function() { 
     // Your code here 
    })(); 
</script>

出典

2016-08-30 15:39:05 Quentin

それは本当に魅力のように動作します – Faisal

-3

ドメイン間でAJAX呼び出しを実行しているため、機能しません。同じドメイン上のページを呼び出さない限り、そのようなajax呼び出しを行うことはできません。回避策がありますが、これが問題です。

代わりにAJAXをテストするためのローカルファイルを作成してください。

これは、w3 Schoolsサイトでは動作しますが、独自のコードでは動作しません。

出典

2016-08-30 13:28:20

w3schoolsによってホストされるエンドポイントはCORSをサポートします。これは問題ではありません。 – Quentin

私は魔法のように動作w3schoolから、このコードを持っているHTML

答えて

関連する問題