使用javascript重载json属性，无需硬重置网页

Use javascript to reload json properties without hard resetting webpage

本文关键字：网页 javascript 重载 json 属性 使用      更新时间：2023-09-26

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并优雅地应用条件，而无需硬重新加载网页。

这可能是一件微不足道的事情，但我缺乏js知识对我没有帮助。我做了几个小时的调查，却一无所获。

你可以简单地调用你的函数，以及相关的getJSON jQuery方法，每隔3秒，间隔如下;

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

您可以使用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);

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

您正在代码中创建表，但此对象未显示在页面上。试试这样:

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);

相关文章：