用JavaScript获取XML数据

我觉得我要把我的头发拉出来。我试图从XML文件中获取一些数据，并将其放入使用JavaScript的表格中。我查看了大约一百万个示例，但由于某种原因，我无法实现它。我一直在使用DreamWeaver，Notepad ++和Brackets。这是我的HTML文件。用JavaScript获取XML数据

<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>[email protected]</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的。请有人告诉我我做错了什么。提前致谢。

来源

2016-02-28 jynx678

是什么或不工作或没有提到如果有错误，在浏览器开发工具控制台抛出。 – charlietfl

好，所以重点在于当单击按钮时，应该调用js，并且它应该使用xml文件中的数据填充表。当我点击按钮时，没有任何反应。 – jynx678

*“什么都没有发生”* ...有些事情......事件回调触发器？您是否在网络标签中打开了浏览器开发工具并检查了请求？控制台中的任何错误？至少需要做一些基本的故障排除 – charlietfl

您的代码正如您在下面创建的代码片段中看到的那样。但是，正如您在注释中所述，问题在于您的请求没有返回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>[email protected]</email> 
 
     </employee> 
 
    </department> 
 
    </textarea>

来源

2016-02-28 20:08:29 Roberto

是的，这是行不通的。非常感谢！ – jynx678

用JavaScript获取XML数据

回答

相关问题