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

Question

我正在尝试创建一个网络应用程序来监控系统事件，并且我使用 Flask 作为我的 CMS。更具体地说，我一直在尝试让系统信息在不刷新页面的情况下定期更新。现在，我正在通过以百分比形式检索本地信息来测试网络应用程序。

我创建了一个名为“/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 元素并经常进行更新。我试过使用 knockout 法，但我也无法让它发挥作用。我的模板如下所示:

<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

更新

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

全口径，附注解:http://jsfiddle.net/FgbKd/15/

基本功能，正常工作:http://jsfiddle.net/FgbKd/1/

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

结束更新

Knockout 实际上非常适合此操作，但对于初次使用 View 模型并使用新数据刷新它的初学者来说，可能会有些困惑。

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

这是一个自定义 View 模型。这就是 knockout mapping 的作用——获取一个 json 并从中创建 View 模型。否则，您必须自己构建。

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

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

那里。您刚刚获取并创建了 myServerData，这是映射到您的 View 模型的 knockout 对象。这是有趣的东西，可以说是您玩的实际玩具。 MyObject.cpuload 将在这里有一个值。

现在，如果您需要刷新您的 myServerData，因为您进行了另一个 AJAX 调用，并且需要您的 viewmodel 对象来反射(reflect)新数据，您只需:

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

比如，也许:

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

宾果游戏，完成。您的 MyServerData 中包含您的新 json，页面上的任何 HTML 都会立即反射(reflect)出来，例如:

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

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