无法将XML数据加载到表标记Html

时间:2016-01-18 17:31:28

标签: javascript html xml

学习 XML 并停留在我无法将XML文件中的数据加载到Table标记的位置 它向我显示了按钮,但是当我点击按钮时它不执行任务。 这是我的

代码

contacts.xml

<?xml version="1.0" encoding="UTF-8"?>
<contacts>
    <contact>
        <name> AMIT PAGARIA</name>
        <number>8128817671</number>
    </contact>  
    <contact>
        <name> SUMIT PAGARIA</name>
        <number>9825988688</number>
    </contact>
    <contact>
        <name> AMIT PAGARIA</name>
        <number>9327023560</number>
    </contact>
</contacts>

HTML CODE

  <html>
    <head>
    <style>
    table, th, td {
      border: 1px solid black;
      border-collapse:collapse;
    }
    th, td {
      padding: 5px;
    }
    </style>
    </head>
    <title></title>

    <body>
    <button type="button" onclick="loadXMLDoc()">Get my Data</button>
    <table id="demo"></table>

    <script>
    function loadXMLdoc()
    {
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                myFunction(xmlhttp);
            }
        };
        xmlhttp.open("GET",contacts.xml,true);
        xmlhttp.send();
    }

    function myFunction(xml)
    {
    var i;
      var xmlDoc = xml.responseXML;
      var table="<tr><th>Name</th><th>Number</th></tr>";
      var x = xmlDoc.getElementsByTagName("contact");
      for (i = 0; i <x.length; i++) { 
        table += "<tr><td>" +
        x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
        "</td><td>" +
        x[i].getElementsByTagName("number")[0].childNodes[0].nodeValue +
        "</td></tr>";
      }
      document.getElementById("demo").innerHTML = table;
    }

    </script>
    </body>
    </html>

1 个答案:

答案 0 :(得分:1)

<script>
function loadXMLDoc(){
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
            myFunction(xmlhttp.responseXML);
        }
    };
    xmlhttp.open("GET","contacts.xml",true);
    xmlhttp.send();
}


function myFunction(xml){
  var table="<tr><th>Name</th><th>Number</th></tr>";
  var x = xml.getElementsByTagName("contact");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("number")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

ps:记得使用loadXMLDoc()而不是未定义的函数loadXMLdoc。您在html正文中的功能与脚本中的功能不同。