如何用JS每30秒刷新Flask变量并在HTML模板展示（停车场应用）

后端Flask修正 #

你的原路由逻辑有两个致命问题：一是while True死循环会阻塞请求，Flask路由是单次请求单次响应的，不能这么写；二是代码缩进错误，return语句被嵌套在except块的缩进里，根本执行不到。

正确的做法是拆分路由：一个负责渲染初始页面，另一个提供API接口供前端定时获取最新停车位数据。

@views.route('/')
def home():
    # 初始加载时获取一次数据，渲染页面
    plazas = 0  # 设置默认值
    try:
        token = getToken()
        if token not in ('null', ''):
            plazas = getInfo(token, parkingID)
    except Exception as e:
        print(f'Error en la conexion: {e}')
    return render_template("home.html", plazas=plazas)

# 新增API接口，返回最新停车位数据
@views.route('/api/plazas')
def get_plazas_api():
    plazas = 0
    try:
        token = getToken()
        if token not in ('null', ''):
            plazas = getInfo(token, parkingID)
    except Exception as e:
        print(f'Error en la conexion: {e}')
    return {'plazas': plazas}  # 返回JSON格式数据

前端JS修正 #

原JS代码有两个问题：一是getElementsByClassName返回的是HTMLCollection类数组，不能直接设置innerHTML；二是没有逻辑去后端拉取最新数据，只是定义了refresh函数但没调用。

修改后的JS代码如下：

// 获取页面上的停车位元素（假设只有一个，取第一个）
const plazaElement = document.getElementsByClassName("num")[0];

// 定义获取并更新数据的函数
async function refreshPlazas() {
    try {
        // 请求后端API获取最新数据
        const response = await fetch('/api/plazas');
        const data = await response.json();
        // 更新页面内容
        plazaElement.innerHTML = data.plazas;
    } catch (error) {
        console.error('获取数据失败:', error);
    }
}

// 页面加载时先执行一次
refreshPlazas();
// 每30秒执行一次更新
setInterval(refreshPlazas, 30000);

补充说明 #

• 后端的API接口返回JSON格式数据，前端通过fetch异步请求，避免页面刷新。
• 去掉了原后端的time.sleep，因为API是被前端定时调用的，不需要后端自己循环等待。
• 保留异常处理，避免单个请求失败导致整个流程卡死。

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