使用 JavaScript 获取 XML 数据

Fetching XML Data with JavaScript

本文关键字：数据 XML 获取 JavaScript 使用      更新时间：2023-09-26

我觉得我要把头发拔掉了。我正在尝试从xml文件中获取一些数据，并使用javascript将其放入表中。我已经查看并遵循了大约一百万个示例，但由于某种原因，我无法让它工作。我一直在使用DreamWeaver，Notepad++和Brackets。这是我的 html 文件。

    <head>
//<meta http-equiv="Content-Type" content="text/html; charset-UTF-8"/>
<script language="javascript" type="text/javascript" src="script2.js"></script>
<title>Computer Science Faculty Information</title>


<h1>Computer Science Faculty Information</h1>
<button onclick="readXML()">Read XML File</button>
<table id="first" border="1">
    <tr>
        <th>Name</th>
    </tr>
</table>

我的 XML 文件

<?xml version="1.0?>
<department>
<employee>
    <name>Ajay Katangur, Ph.D.</name>
    <title>Program Coordinator</title>`
    <office>CI 340</office>
    <phone>361-825-2478</phone>        
    <email>ajay.katangur@tamucc.edu</email>
</employee>
</department>

和我的 js 文件

function readXML() {
"use strict";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        myFunction(xmlhttp);
    }
};
xmlhttp.open("GET", "xml.xml", true);
xmlhttp.send();

}

function myFunction(xml) {
"use strict";
var x, i, xmlDoc, table;
xmlDoc = xml.responseXML;
table = "<tr><th>Name</th><th>Title</th><th>Office</th><th>Phone</th><th>Email</th><tr>";
x = xmlDoc.getElementsByTagName("employee");
for(i = 0; i < x.length; i++) {
    table += "<tr><td>" + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("office")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("email")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("first").innerHTML = table;

}

我应该提到，这里的js代码的很大一部分来自W3Schools。请有人告诉我我做错了什么。提前谢谢。

您的代码的工作方式如我在下面创建的片段中看到的那样。但是，正如您在评论中指出的那样，问题是您的请求没有返回 XML 文件。检查 URL 以确保其正确无误。

还要确保您的 XML 正确无误。例如，您的 XML 声明缺少引号，即应该<?xml version="1.0"?> 并确保在该声明之前文件中没有空格。

运行代码段以查看其工作情况。您可以在文本框中编辑 XML，然后单击按钮以查看更改。

function readXML() {
  "use strict";
  
  
  // simulated request
  var xmlhttp={};
  xmlhttp.responseText = window.data.value; 
  xmlhttp.responseXML = (new DOMParser()).parseFromString(xmlhttp.responseText, 'text/xml')
  myFunction(xmlhttp);
/*  
  var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
          myFunction(xmlhttp);
      }
    };
    xmlhttp.open("GET", "xml.xml", true);
    xmlhttp.send();
  }
*/
}
function myFunction(xml) {
  "use strict";
  var x, i, xmlDoc, table;
  xmlDoc = xml.responseXML;
  table = "<tr><th>Name</th><th>Title</th><th>Office</th><th>Phone</th><th>Email</th><tr>";
  x = xmlDoc.getElementsByTagName("employee");
  for (i = 0; i < x.length; i++) {
    table += "<tr><td>" + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("office")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("email")[0].childNodes[0].nodeValue + "</td></tr>";
  }
  document.getElementById("first").innerHTML = table;
}
textarea {
  width: 90%;
  height: 40em;
  padding: 0.5em;
  border: 1px solid black;
  background-color: aliceblue;
}
table {
  border-collapse: collapse;
}
td {
  border: 1px lightgray solid;
  padding: 2px;
}
<button onclick="readXML()">Read XML File</button>
<table id="first" border="1">
  <tr>
    <th>Name</th>
  </tr>
</table>
<h4>XML:</h4>
<textarea id="data">
<?xml version="1.0" encoding="UTF-8" ?>
    <department>
      <employee>
        <name>John Smith, Ph.D.</name>
        <title>Program Coordinator</title>`
        <office>CI 340</office>
        <phone>000-000-0000</phone>
        <email>John.Smith@tamucc.edu</email>
      </employee>
    </department>
  </textarea>

相关文章：