【发布时间】：2018-10-18 14:59:05
【问题描述】：
在这方面我需要一点帮助，我正在尝试使用 Ajax 构建一个仪表板，它解析 XML 文件中的数据并将其显示在表格/仪表板上。我想要类似的东西，如果 XML 的数据发生变化，它也应该反映在网站上（实时）/没有重新加载页面。我尝试了几个与 setInterval() 函数相关的技巧，但它只是复制了整个结果并继续这样做.. 下面是我试图这样做的 ajax 脚本和 xml。 XMl 的文件名为 XMLFile.xml。我的 XML 的小内容在评论中.. 假设如果第一个属性发生变化，DNSStatus 从“OK”变为“NOTOK”，绿色勾号应该变为红色叉号，并且也没有刷新整个页面。
<script language="javascript" type="text/javascript">
var CheckImage = "<img src= 'images/check.png' height=''20 width='20'>";
var CrossImage = "<img src= 'images/cross.png' height=''20 width='20'>";
$.ajax({
type: 'GET',
url: 'XMLFile.xml',
dataType: 'xml',
cache: false,
success: function (xml) {
$(xml).find("URLs").each(function ()
{
var Sitename = $(this).find('ProdURL').attr('ProdHost')
var URLType = $(this).find('ProdURL').attr('URLType')
var DNSStatus = $(this).find('ProdURL').attr('DNSStatus')
var TargetStatus = $(this).find('ProdURL').attr('TargetStatus')
var TTL = $(this).find('ProdURL').attr('TTL')
var SSL = $(this).find('ProdURL').attr('SSL')
var Force = $(this).find('ProdURL').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('RootURL').attr('RootHost')
var URLType = $(this).find('RootURL').attr('URLType')
var DNSStatus = $(this).find('RootURL').attr('DNSStatus')
var TargetStatus = $(this).find('RootURL').attr('TargetStatus')
var TTL = $(this).find('RootURL').attr('TTL')
var SSL = $(this).find('RootURL').attr('SSL')
var Force = $(this).find('RootURL').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('WorkingURL').attr('WorkingHost')
var URLType = $(this).find('WorkingURL').attr('URLType')
var DNSStatus = $(this).find('WorkingURL').attr('DNSStatus')
var TargetStatus = $(this).find('WorkingURL').attr('TargetStatus')
var TTL = $(this).find('WorkingURL').attr('TTL')
var SSL = $(this).find('WorkingURL').attr('SSL')
var Force = $(this).find('WorkingURL').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('ModuleURL').attr('ModuleHost')
var URLType = $(this).find('ModuleURL').attr('URLType')
var DNSStatus = $(this).find('ModuleURL').attr('DNSStatus')
var TargetStatus = $(this).find('ModuleURL').attr('TargetStatus')
var TTL = $(this).find('ModuleURL').attr('TTL')
var SSL = $(this).find('ModuleURL').attr('SSL')
var Force = $(this).find('ModuleURL').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('Moduleurl').attr('ModuleHost')
var URLType = $(this).find('Moduleurl').attr('URLType')
var DNSStatus = $(this).find('Moduleurl').attr('DNSStatus')
var TargetStatus = $(this).find('Moduleurl').attr('TargetStatus')
var TTL = $(this).find('Moduleurl').attr('TTL')
var SSL = $(this).find('Moduleurl').attr('SSL')
var Force = $(this).find('Moduleurl').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('VanityURL').attr('VanityHost')
var URLType = $(this).find('VanityURL').attr('URLType')
var DNSStatus = $(this).find('VanityURL').attr('DNSStatus')
var TargetStatus = $(this).find('VanityURL').attr('TargetStatus')
var TTL = $(this).find('VanityURL').attr('TTL')
var SSL = $(this).find('VanityURL').attr('SSL')
var Force = $(this).find('VanityURL').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
$(xml).find("URLs").each(function () {
var Sitename = $(this).find('Vanityurl').attr('VanityHost')
var URLType = $(this).find('Vanityurl').attr('URLType')
var DNSStatus = $(this).find('Vanityurl').attr('DNSStatus')
var TargetStatus = $(this).find('Vanityurl').attr('TargetStatus')
var TTL = $(this).find('Vanityurl').attr('TTL')
var SSL = $(this).find('Vanityurl').attr('SSL')
var Force = $(this).find('Vanityurl').attr('Force')
showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force);
});
}
});
function showData(Sitename, URLType, DNSStatus, TargetStatus, TTL, SSL, Force)
{
var TargetStatusImage;
if (TargetStatus === "OK")
{
TargetStatusImage = CheckImage;
}
else
{
TargetStatusImage = CrossImage;
}
var DNSStatusImage;
if (DNSStatus === "OK")
{
DNSStatusImage = CheckImage;
}
else
{
DNSStatusImage = CrossImage;
}
var SSLImage;
if (SSL === "OK")
{
SSLImage = CheckImage;
}
else
{
SSLImage = CrossImage;
}
$('#demo tbody').append('<tr><td>' + Sitename + '</td><td>' + URLType + '</td><td>' + DNSStatusImage + '</td><td>' + TargetStatusImage + '</td><td>' + TTL + '</td><td>' + SSLImage + '</td><td>' + Force + '</td></tr>')
}
</script>
输入文件示例
<?xml version="1.0" encoding="utf-8" ?>
<!--Website Status-->
<WebApplication>
<URLs>
<ProdURL ProdHost="www.wellington.ca" URLType="Prod" DNSStatus="OK" TargetStatus="OK" TTL="300" SSL="OK" Force="Yes" />
<RootURL RootHost="wellington.ca" URLType="Root" DNSStatus="OK" TargetStatus="NotOK" TTL="3583" SSL="OK" Force="Yes" />
<ModuleURL ModuleHost="calendar.wellington.ca" URLType="Module" DNSStatus="OK" TargetStatus="OK" TTL="297" SSL="OK" Force="Yes" />
</URLs>
</WebApplication>
【问题讨论】：
-
请不要破坏您的帖子。通过在 Stack Exchange 网络上发布，您已授予 SE 分发该内容的不可撤销的权利（在 CC BY-SA 3.0 license 下）。根据 SE 政策，任何破坏行为都将被撤销。
-
@Machavity 你能帮我处理我的网页代码吗？我正在尝试在表中添加一列，该列将在 XML 中的数据发生更改时显示时间戳。
标签： javascript ajax xml web-applications