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

Unable to load XML data to table tag Html

本文关键字：Html 加载 XML 数据      更新时间：2023-09-26

学习XML并卡在无法将数据从XML文件加载到表标签的点它向我显示了制作的按钮，但是当我单击该按钮时，它不会执行任何任务。这是我的代码

联系人.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>
    <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>

<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 主体中的函数与脚本中的函数不同。

相关文章：