使用 Flask 和 Jinja2 实现动态数据更新-html教程-PHP中文网

使用 Flask 和 Jinja2 实现动态数据更新

花韻仙語

发布： 2025-09-13 15:47:17

原创

633人浏览过

使用 flask 和 jinja2 实现动态数据更新

本文介绍了如何在使用 Flask 框架和 Jinja2 模板引擎构建的 Web 应用中，实现动态数据更新，避免页面刷新。由于 Jinja2 模板在渲染完成后无法感知后端数据的变化，因此需要借助其他技术，如 AJAX 或 WebSocket，来实现数据的实时更新。本文将重点介绍使用 AJAX 的实现方法，并提供示例代码和注意事项。

利用 AJAX 实现动态数据更新

Jinja2 是一个强大的模板引擎，但它只负责在服务器端渲染模板，一旦渲染完成，前端页面就无法直接感知后端数据的变化。要实现数据的动态更新，最常用的方法是使用 AJAX（Asynchronous JavaScript and XML）。

原理：

AJAX 允许前端 JavaScript 代码异步地向服务器发送请求，并接收服务器返回的数据，然后在不刷新整个页面的情况下，更新页面上的部分内容。

实现步骤：

后端 Flask 视图函数： 创建一个 Flask 视图函数，该函数负责获取需要动态更新的数据，并将其以 JSON 格式返回。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

from flask import Flask, render_template, jsonify
import time
import random

app = Flask(__name__)

# 模拟动态数据
data = {'order_count': 0}

@app.route('/')
def index():
    return render_template('index.html', order_count=data['order_count'])

@app.route('/update_data')
def update_data():
    # 模拟数据更新
    data['order_count'] = random.randint(1, 100)
    return jsonify(order_count=data['order_count'])

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

登录后复制

前端 Jinja2 模板： 在 Jinja2 模板中，使用 JavaScript 代码定期向 /update_data 路由发送 AJAX 请求，并更新页面上的数据。

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Data Update</title>
</head>
<body>
    <h1>Order Count: <span id="order-count">{{ order_count }}</span></h1>

    <script>
        function updateOrderCount() {
            fetch('/update_data')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('order-count').textContent = data.order_count;
                });
        }

        // 每 3 秒更新一次数据
        setInterval(updateOrderCount, 3000);
    </script>
</body>
</html>

登录后复制

解释：
- Flask 应用定义了一个 /update_data 路由，它返回一个 JSON 对象，包含更新后的订单数量。
- 前端 JavaScript 代码使用 fetch API 发送 AJAX 请求到 /update_data 路由。
- 当收到响应时，解析 JSON 数据，并使用 document.getElementById 找到页面上显示订单数量的 span 元素，然后更新其文本内容。
- setInterval 函数每 3 秒调用一次 updateOrderCount 函数，从而实现数据的定期更新。

注意事项：

数据格式： 后端返回的数据格式应易于前端解析，JSON 是一种常用的选择。
错误处理： 在 JavaScript 代码中，应添加错误处理机制，以应对网络请求失败等情况。
更新频率： 数据更新的频率应根据实际需求进行调整，过高的频率可能会增加服务器的负担。
安全性： 在处理敏感数据时，应注意数据传输的安全性，例如使用 HTTPS 协议。
替代方案： 除了 AJAX，还可以使用 WebSocket 实现数据的实时更新。WebSocket 提供了持久连接，可以实现服务器向客户端的主动推送，适用于对实时性要求更高的场景。

总结：

通过结合 Flask 和 Jinja2，并利用 AJAX 技术，可以轻松实现 Web 应用中的动态数据更新。这种方法避免了页面刷新，提高了用户体验，适用于需要实时显示数据的场景，例如监控面板、实时交易系统等。根据实际需求，可以选择合适的更新频率和数据格式，并注意安全性问题。

以上就是使用 Flask 和 Jinja2 实现动态数据更新的详细内容，更多请关注php中文网其它相关文章！