Question

JSON示例：

[{
    "client": "client1",
    "ip": "127.0.0.1",
    "status": "up"
}, {
    "client": "client2",
    "ip": "127.0.0.2",
    "status": "up"
}]

我有这个脚本来读取JSON文件并根据JSON信息创建表并将颜色应用于表：

<script type="text/javascript">

    $.getJSON("<urltojson>/clients.json",
    function (data) {

        var tr;
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].client +  "</td>");
            $('table').append(tr);

           if(data[i].status == "up")
            {
              $('td',tr).css ('background-color', '#88d066');
             } else {
              $('td',tr).addClass("statusHOSTDOWN");
            };
        }
    });

    </script>

JSON文件本身通过后端python脚本进行更新。一切都按预期工作。但是，如果我想从JSON文件中看到更新信息，我需要重新加载网页，这很容易做到。但我希望javascript能够在后台自动重新加载JSON并优雅地应用条件，而无需重新加载网页。

这可能是微不足道的事情，但我缺乏知识并没有帮助我。没有任何运气，我做了几个小时值得研究。任何帮助表示赞赏。

Answer 1

您可以每3秒调用一次函数和相关的getJSON jQuery方法，间隔为这样;

window.setInterval(function(){ getJson(); myFunc(); }, 3000);

Answer 2

您可以使用setInterval或setTimeout每隔几秒钟获取一次JSON。

var timeToRefresh = 5 * 1000; // 5 seconds
setTimeout(function fetchData() {
  $.getJSON("<urltojson>/clients.json",
    function (data) {

        var tr;
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].client +  "</td>");
            $('table').append(tr);

           if(data[i].status == "up")
            {
              $('td',tr).css ('background-color', '#88d066');
             } else {
              $('td',tr).addClass("statusHOSTDOWN");
            };
        }
    });
  setTimeout(fetchData, timeToRefresh);
}, timeToRefresh);

我知道这不是一个完美的解决方案，但我希望它能起作用。

Answer 3

您正在代码中创建表格，但此对象不会显示在您的页面上。试试这样：

var timeToRefresh = 5 * 1000; // 5 seconds
setTimeout(function fetchData() {
  $.getJSON("<urltojson>/clients.json",
    function (data) {

        var tr;
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].client +  "</td>");
            $('#myTable').append(tr);

           if(data[i].status == "up")
            {
              $('td',tr).css ('background-color', '#88d066');
             } else {
              $('td',tr).addClass("statusHOSTDOWN");
            };
        }
    });
  setTimeout(fetchData, timeToRefresh);
}, timeToRefresh);

<强> HTML

 <table id="myTable"></table>

使用javascript重新加载json属性而无需重置硬网页

3 个答案: