使用ajax和XML创建仪表板

时间：2018-10-18 14:59:06

标签： javascript ajax xml web-applications

在这方面我需要一点帮助，我正在尝试使用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>

1 个答案:

答案 0 :(得分：0)

设置数据public class Foo { [DisplayName(nameof(SelectedBar)), Browsable(true)] public Bar SelectedBar { get; set; } = null; [Browsable(false)] public List<Bar> Bars { get; set; } = new List<Bar>() { new Bar("Bar0"), new Bar("Bar1"), new Bar("Bar2") }; } public class Bar { public string Name; public Bar(string name) { Name = name; } public override string ToString() { return Name; } } 时不必使用append，而需要覆盖现有值。尝试使用$('#demo tbody').append()。

相关问题
最新问题