내가 마치 마법처럼 작동 w3school에서이 코드를 HTML

에서 자바 스크립트를 사용하여 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>

어떤 변수 이름을 변경해야합니까? 스크립트는 작동했지만 두 번 작동하지 않았습니다. 변수를 변경하려고 시도했지만 작동하지 않았습니다. 모든 변수 이름을 변경했습니다.

출처

2016-08-30 Faisal

을 당신은 한 페이지에 있지만, 경우에 또 다시 동일한 ID를 사용할 수 없습니다 정확히 무엇을 당신이 – mean

정교한 수 원하는 당신은 다른 html로 사용하고있다. 그리고 dt는 다른 최신 업데이트 된 코드를 사용한다. – mean

@Kabali - OP는 HTML ID 값을 재사용하지 않는다. – Quentin

두 개의 스크립트가 동일한 JS 환경에 존재합니다. 둘 다 같은 이름의 전역 변수를 만들고 서로 간섭합니다. 각자가 작동하는

랩 IIFE의 각 스크립트는 새 범위를 만들 수 있습니다.

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

출처

2016-08-30 15:39:05 Quentin

정말 매력처럼 작동합니다. – Faisal

-3

도메인간에 AJAX 호출을 실행하기 때문에 작동하지 않습니다. 같은 도메인에서 페이지를 호출하지 않는 한 아약스 호출을 할 수 없습니다. 해결 방법이 있지만이 경우 문제가됩니다.

대신 AJAX를 테스트 할 로컬 파일을 만드십시오.

이것이 왜 w3 Schools 사이트에서는 작동하지만 사용자 코드에서는 작동하지 않습니다.

출처

2016-08-30 13:28:20

w3schools가 호스트하는 끝점은 CORS를 지원합니다. 이것은 문제가되지 않습니다. – Quentin

내가 마치 마법처럼 작동 w3school에서이 코드를 HTML

답변

관련 문제