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

Posted 2023-05-08

【中文标题】如何在不刷新页面的情况下定期更新数据？

【英文标题】：How to update data periodically without refreshing the page?

【发布时间】：2014-08-18 22:07:42

【问题描述】：

我正在尝试创建一个 Web 应用程序来监控系统活动，并且我正在使用 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 元素并经常更新。我试过使用淘汰赛，但我也无法让它发挥作用。我的模板如下所示：

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

【参考方案1】：

更新

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

全口径，附评论：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，它是映射到视图模型的淘汰对象。这是有趣的东西，可以说是你玩的真正的玩具。 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>

所以，加载敲除、敲除映射 JS 文件，使用我向您展示的视图模型，然后在您获得新数据时使用 mapping.fromJS 行更新您的视图模型。

【讨论】：

我决定添加一个 JSFiddle 来向您展示轻松：jsfiddle.net/FgbKd/1

我还没有全部添加，但这看起来很棒！谢谢！我会告诉你进展如何。

请注意，jquery.json js 文件也包含在 JSFiddle 中（它处理 $.toJSON 以处理 JSFiddle 的虚假数据，但您的文件中不需要它因为您要返回 JSON）。我一直在修补以使其更清晰：jsfiddle.net/FgbKd/6

@njcolvin - 因为我不能独自离开并帮助澄清：jsfiddle.net/FgbKd/9