Javascript 如何在不刷新页面的情况下定期更新数据？

我正在尝试创建一个web应用程序来监视系统活动，我正在使用Flask作为我的CMS。更具体地说，我一直试图在不刷新页面的情况下定期更新系统信息。现在，我正在通过按百分比检索本地信息来测试web应用程序

我创建了一个名为“/刷新”的路由，并以JSON格式将本地信息添加到该路由中：

@app.route('/refresh')
    def refreshData():
        systemInfo = {'cpuload': si.getCPU(), 'memload': si.getMEM(), 'diskload': si.getDiskSpace()}
        return jsonify(systemInfo)

数据如下所示：

{
  "cpuload": 4.3, 
  "diskload": 0.7, 
  "memload": 27.8
}

<ul id='sysInfo'>
    <li>Hostname: {{ sysInfo[0] }}</li>
    <li>CPU Core Count: {{ sysInfo[1] }}</li>
    <script type='text/javascript' src="http://code.jquery.com/jquery.min.js"></script>
    <script type='text/javascript' src="http://knockoutjs.com/downloads/knockout-3.1.0.js">
        function update() {
            $.getJSON('/refresh', function(data) {
                $('#cpu').html(data[cpuload]);
                window.setTimeout(update, 5000);
            });
        }
    </script>
    <li>
        <div id="progress">
            <span id="percent">CPU usage: <div id="cpu"></div>%</span>
            <div style ='height: 20px; background-color: green; width: {{ cpuLoad }}%;'></div>
        </div>
        </li>

到目前为止，我正在使用Flask的变量来显示模板中的信息，但我希望访问HTML中脚本中的JSON数据，并将其设置为HTML元素，并每隔一段时间进行更新。我尝试过使用击倒，但我也无法让它发挥作用。我的模板如下所示：

{
  "cpuload": 4.3, 
  "diskload": 0.7, 
  "memload": 27.8
}

<ul id='sysInfo'>
    <li>Hostname: {{ sysInfo[0] }}</li>
    <li>CPU Core Count: {{ sysInfo[1] }}</li>
    <script type='text/javascript' src="http://code.jquery.com/jquery.min.js"></script>
    <script type='text/javascript' src="http://knockoutjs.com/downloads/knockout-3.1.0.js">
        function update() {
            $.getJSON('/refresh', function(data) {
                $('#cpu').html(data[cpuload]);
                window.setTimeout(update, 5000);
            });
        }
    </script>
    <li>
        <div id="progress">
            <span id="percent">CPU usage: <div id="cpu"></div>%</span>
            <div style ='height: 20px; background-color: green; width: {{ cpuLoad }}%;'></div>
        </div>
        </li>

主机名：{{sysInfo[0]}
CPU核心计数：{{sysInfo[1]}
函数更新（）{
$.getJSON（'/refresh'，函数（数据）{
$（'#cpu'）.html（数据[cpuload]）；
设置超时（更新，5000）；
});
}

CPU使用率：%

---

我知道HTML中的脚本没有多大意义，但基本上我只想使用getJSON（或任何最好的）获取数据，并将数据放入我的HTML中。

UPDATE

看看我做的这个JSFIDLE，它演示了这一点。只要在需要时将按钮单击替换为数据轮询：

全通径，附注释：

赤裸裸的工作：

我已经完成了对JSFIDLE的更新，使其更加清晰和详细

结束更新

Knockout实际上非常适合于此，但对于第一次启动viewmodel，然后用新数据刷新它，可能会有点混乱

function myViewModel (data) {
    data = data || {}; var self = this;
    self = ko.mapping.fromJS(data);
  return self;
}

这是一个自定义的viewmodel。这就是敲除映射所做的——获取json并从中创建viewmodel。否则，你必须建立自己的

现在您需要从它创建一个对象，并用数据填充它。你可以这样做：

var myServerData;
$(document).ready(function(){
    myServerData = new myViewModel(data_json_received);    //
    ko.applyBindings(MyObject);     //myServerDataapplies the bindings found in HTML
});

在那里。您刚刚获取并创建了myServerData，它是映射到viewmodel的淘汰对象。这是有趣的东西，可以说是你玩的真正的玩具

MyObject.cpuload

将在此处有一个值

现在，如果您需要刷新myServerData，因为您进行了另一个AJAX调用，并且需要viewmodel对象反映新数据，那么您只需：

ko.mapping.fromJS(new_json_data, {}, myServerData);

比如，也许：

$.ajax({ 
  ....
  success : function(data){
     ko.mapping.fromJS(data, {}, myServerData);   //refreshes it
  }
});

宾果，完成了。MyServerData中包含新的json，页面上的任何HTML都会立即反映这一点，例如：

<SPAN data-bind="text: cpuload"></SPAN>
<SPAN data-bind="text: diskload"></SPAN>
<SPAN data-bind="text: memload"></SPAN>

---

因此，加载knockout，knockout-mapping JS文件，使用我向您展示的viewmodel，然后在获得新数据时使用mapping.fromJS行更新您的viewmodel。

我决定添加一个JSFIDLE，向您展示它的易用性：我还没有全部添加，但这看起来很棒！非常感谢。我会让你知道它是如何运行的。正如你所知道的，jquery.json js文件也包含在JSFiddle中（它为JSFiddle的伪数据处理$.toJSON，但是你不需要它，因为你得到的是json）。我不断地修补以使它更清晰：@njcolvin-因为我不能单独留下来帮助澄清：