如何从存储在我的 PC 上的文件中获取 XML 数据并使用 javascript 填充 HTML 表格？
Posted
技术标签:
【中文标题】如何从存储在我的 PC 上的文件中获取 XML 数据并使用 javascript 填充 HTML 表格？【英文标题】：How can I fetch XML Data from a file stored on my PC and populate a table in HTML using javascript? 【发布时间】：2020-06-12 20:03:57 【问题描述】：请在下面查看我的 XML 和 html： 我要做的就是使用我的 XML 文件中的数据生成一个 HTML 表。 （此 XML 文件位于我的 C 目录中，但与 HTML 文件位于同一文件夹中。） （C:/Users/Admin/Documents/GameStats/main.html --> 作为主 html 文件）。 （C:/Users/Admin/Documents/GameStats/game.xml --> 作为 XML 文件）。
我将不胜感激。我不介意 javascript、AJAX、JQUERY。 如果您能告诉我我的错误，我将不胜感激。
<?xml version="1.0" encoding="UTF-8"?>
<GAME>
<COUNTRY>
<NAME>China</NAME>
<PLAYERS>80,000</PLAYERS>
<KILLS>35,060</KILLS>
</COUNTRY>
<COUNTRY>
<NAME>Pakistan</NAME>
<PLAYERS>234</PLAYERS>
<KILLS>340</KILLS>
</COUNTRY>
<COUNTRY>
<NAME>Indonesia</NAME>
<PLAYERS>867</PLAYERS>
<KILLS>546</KILLS>
</COUNTRY>
</GAME>
这是 HTML 文档：
<!DOCTYPE html>
<html>
<style>
table,th,td
border : 1px solid black;
border-collapse: collapse;
th,td
padding: 5px;
</style>
<body>
<button type="button" onclick="loadXMLDoc()">Get Game Stats</button>
<br><br>
<table id="demo"></table>
<script>
function loadXMLDoc()
//document.body.style.backgroundColor = "red";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
if (this.readyState == 4 && this.status == 200)
myFunction(this);
;
xmlhttp.open("GET", "/game.xml", true);
xmlhttp.send();
function myFunction(xml)
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Name</th><th>Players</th><th>Kills></th></tr>";
var x = xmlDoc.getElementsByTagName("COUNTRY");
for (i = 0; i <x.length; i++)
table += "<tr><td>" +
x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("PLAYERS")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("KILLS")[0].childNodes[0].nodeValue +
"</td></tr>";
document.getElementById("demo").innerHTML = table;
</script>
</body>
</html>
我将不胜感激。 :)
【问题讨论】：
应该在网络服务器上运行才能工作。在 Windows 上，您可能可以使用file:// 协议，但如果我没记错的话，我相信浏览器可能需要启用标志才能允许文件协议。可能更容易构建一个小的 nodejs 网络服务器来支持它。
你遇到了什么问题？
当我点击按钮时，我什么也看不到。什么都没有生成。
我也试过在服务器上运行它，出现同样的问题。
@mrkn0007 当您说“我也尝试在服务器上运行它”时，您是什么意思？您能否更新您的问题以包含您尝试过的内容？
【参考方案1】：
所以，有几个问题：您需要一个本地测试服务器来尝试这样的东西，除非您想不断地将文件上传到远程服务器来测试它们。有很多方法可以设置本地测试服务器（Python、php 具有内置测试服务器、虚拟机等），但使用 xampp，您将在大约 5 分钟内启动并运行。它是免费的，您会找到有关设置它的视频或教程，尽管它很简单。
第二个是加载XML，我使用如下：
function loadXML()
var urlVar = ('myXML.xml'); // where your xml file lives
var succVar = xmlLoaded; // what to do after it's loaded
$.ajax(
type: "GET",
url: urlVar,
dataType: "xml",
success: succVar
);
function xmlLoaded(data)
var loadedXML = data;
console.log('xml', $(loadedXML).find('game').html()); // display the content of <game> in your console window
【讨论】：
以上是关于如何从存储在我的 PC 上的文件中获取 XML 数据并使用 javascript 填充 HTML 表格？的主要内容，如果未能解决你的问题，请参考以下文章
如何在我的 .NET App.Config 文件中存储 XML 值