Flask+ajax实现动态更新div

最新推荐文章于 2024-08-06 20:09:41 发布

ckdfs

最新推荐文章于 2024-08-06 20:09:41 发布

阅读量890

点赞数 1

文章标签： flask ajax python

本文链接：https://blog.csdn.net/ckdfs/article/details/128107259

版权

需求

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

效果

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

关键代码

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()]