使用 Ajax 和 XML 创建仪表板

Question

我需要一点帮助，我正在尝试使用 Ajax 构建一个仪表板，它解析 XML 文件中的数据并将其显示在表/仪表板上。我想要这样的东西，如果XML的数据发生变化，它也应该反映在网站上(实时(/无需重新加载页面。我尝试了几个与setInterval((函数相关的技巧，但它只是复制了整个结果并继续这样做。下面是我尝试从中执行此操作的 ajax 脚本和 XML。XMl 的文件名是 XMLFile.xml。我的 Xml 的小内容在评论中。假设如果第一个属性发生变化，比如说，DNSStatus 从"确定"更改为"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>

Answer 1

设置数据时不使用append$('#demo tbody').append()您需要覆盖现有值。 尝试使用$('#demo tbody').html(<your data goes here>)。