Flask+ajax实现动态更新div

最新推荐文章于 2025-04-24 21:30:42 发布

原创最新推荐文章于 2025-04-24 21:30:42 发布 · 1.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#flask #ajax #python

本文介绍了一个实时刷新设备总数和详细信息的前端实现，使用JavaScript的Ajax实现与Flask后端的数据交互。前端通过设置定时器每秒调用`change_div`函数，清除并更新`device_page_num`的内容，展示当前接入设备的数量和对应项目。后端接收到请求后，从数据库获取数据并返回给前端，确保设备列表随变化实时更新。

需求

每秒刷新折叠面板，显示当前接入设备的个数，并创建对应的项目

效果

第一次刷新前
刷新后
随着设备列表的变化而增删

关键代码

HTML

<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
  <div id="device_page_num" class="bg-white py-2 collapse-inner rounded">
    <h6 class="collapse-header">设备总数: 0</h6>
  </div>
</div>

要更新的就是device_page_num

Javascript

function change_div(){
    $.ajax({
        type: 'GET',
        url: '/device_card_refresh',
        timeout: 10000,
        success:function(a){
            $('#device_page_num').children().remove()
            $('#device_page_num').append($("<h6 class='collapse-header'>设备总数: "+a[0]+"</h6>"))
            for (var i in a[1]){
                var div = $("<a class='collapse-item' href=\'/devicepage/" + i + "\'>" + a[1][i] + "</a>\n")
                $('#device_page_num').append(div)
            }
        },
    })
}
setInterval(change_div, 1000)

先清空device_page_num的所有子内容，再写入新的

Flask

@app.route('/device_card_refresh')
def device_card_refresh():
    df = query.read_sql()
    device_num, device_data = getData.get_device_data(df)
    return [device_num, device_data.tolist()]