Flask实现页面表格每秒自动实时更新（无需整页刷新）

后端（app.py）修改 #

先新增一个接口专门返回表格的JSON格式数据，让前端能异步获取最新内容：

from flask import Flask, render_template, jsonify
import random  # 示例用随机数模拟实时数据，实际替换成你的业务逻辑

app = Flask(__name__)

# 原路由：返回stat.html页面
@app.route('/')
def index():
    return render_template('stat.html')

# 新增接口：提供表格数据
@app.route('/api/get-table-data')
def get_table_data():
    # 替换成你实际获取数据的逻辑（比如读数据库、缓存）
    table_data = [
        {"id": 1, "name": "用户A", "value": random.randint(10, 100)},
        {"id": 2, "name": "用户B", "value": random.randint(10, 100)},
        {"id": 3, "name": "用户C", "value": random.randint(10, 100)}
    ]
    return jsonify(table_data)

if __name__ == '__main__':
    app.run(debug=True)

前端（stat.html）修改 #

添加Ajax定时请求逻辑，每秒获取新数据并更新表格：

<!DOCTYPE html>
<html>
<head>
    <title>实时统计表格</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <table id="stat-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>数值</th>
            </tr>
        </thead>
        <tbody>
            <!-- 内容会被动态更新 -->
        </tbody>
    </table>

    <script>
        function updateTable() {
            $.ajax({
                url: '/api/get-table-data',
                type: 'GET',
                success: function(data) {
                    let tbody = $('#stat-table tbody');
                    tbody.empty();
                    data.forEach(item => {
                        let row = `<tr>
                            <td>${item.id}</td>
                            <td>${item.name}</td>
                            <td>${item.value}</td>
                        </tr>`;
                        tbody.append(row);
                    });
                },
                error: function(xhr, status, error) {
                    console.error('获取数据失败:', error);
                }
            });
        }

        // 页面加载后立即更新，之后每秒刷新一次
        $(document).ready(function() {
            updateTable();
            setInterval(updateTable, 1000);
        });
    </script>
</body>
</html>

常见问题排查 #

• 不用jQuery的话，把Ajax换成原生fetch：

  function updateTable() {
      fetch('/api/get-table-data')
          .then(res => res.json())
          .then(data => {
              let tbody = document.querySelector('#stat-table tbody');
              tbody.innerHTML = '';
              data.forEach(item => {
                  let row = document.createElement('tr');
                  row.innerHTML = `<td>${item.id}</td><td>${item.name}</td><td>${item.value}</td>`;
                  tbody.appendChild(row);
              });
          })
          .catch(err => console.error('获取数据失败:', err));
  }
  

• 确保前后端请求URL一致，比如后端跑在localhost:5000，前端请求地址要对应
• 查看浏览器控制台的错误信息，定位是请求失败还是DOM操作问题
• 跨域的话，给Flask加CORS支持：安装flask-cors，然后在app.py里加from flask_cors import CORS; CORS(app)

内容的提问来源于stack exchange，提问作者Siri