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

Question

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

我创建了一个名为“/ refresh”的路由，并以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
}

截至目前，我正在使用Flask的变量在我的模板中显示信息，但我想在HTML中的脚本中访问JSON数据并将其设置为HTML元素并且经常进行更新。 我尝试过使用淘汰赛，但我也无法使用淘汰赛。 我的模板看起来像这样：

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

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

Answer 1

UPDATE

看看这个jsfiddle我做了那个演示它。 只需在需要时用您的数据轮询替换按钮单击：

Full Bore，评论： http ： //jsfiddle.net/FgbKd/15/

裸骨，正常工作： http ： //jsfiddle.net/FgbKd/1/

我完成了更新我的jsfiddle以使其更清晰和详细。

结束更新

Knockout实际上是完美的，但是对于获得视图模型的第一个计时器 - 然后使用新数据刷新它可能会有点令人困惑。

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

这是一个自定义的视图模型。 这就是淘汰映射的作用 - 获取json并从中创建视图模型。 否则你必须建立自己的。

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

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映射JS文件，使用我向您展示的viewmodel，然后使用mapping.fromJS行在您获取新数据时随时更新您的viewmodel。