如何用Flask Python同时展示HTML模板与可实时修改的变量？

问题原因 #

• Flask视图函数只能返回一个响应对象，同时返回str(val)和render_template必然触发报错。
• 直接用render_template返回的是静态渲染后的HTML，页面加载后不会自动更新内容，必须手动刷新才能获取最新的val。

解决方案 #

分三个版本逐步实现需求，从基础到高效实时：

1. 基础版：模板渲染+表单修改val（页面刷新更新） #

先实现模板展示和用户修改功能，提交表单后刷新页面显示最新值。

后端代码：

from flask import Flask, render_template, request

app = Flask(__name__)
val = "初始值"  # 全局变量

@app.route('/', methods=['GET', 'POST'])
def index():
    global val
    if request.method == 'POST':
        # 接收用户提交的新值
        new_val = request.form.get('new_val')
        if new_val:
            val = new_val
    # 将val传入模板渲染
    return render_template('index.html', current_val=val)

创建templates/index.html模板文件：

<!DOCTYPE html>
<html>
<head>
    <title>实时文本显示</title>
</head>
<body>
    <h1>当前值: {{ current_val }}</h1>
    <!-- 用户修改值的表单 -->
    <form method="POST">
        <input type="text" name="new_val" placeholder="输入新值">
        <button type="submit">修改</button>
    </form>
</body>
</html>

2. 实时更新版：AJAX轮询自动获取最新val #

无需手动刷新页面，通过JavaScript定时请求后端接口获取最新值并更新页面。

修改后端代码，新增获取val的接口：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)
val = "初始值"

@app.route('/', methods=['GET', 'POST'])
def index():
    global val
    if request.method == 'POST':
        new_val = request.form.get('new_val')
        if new_val:
            val = new_val
    return render_template('index.html', current_val=val)

# 新增接口，返回最新的val
@app.route('/get_val')
def get_val():
    global val
    return jsonify({'val': val})

更新templates/index.html，加入AJAX轮询逻辑：

<!DOCTYPE html>
<html>
<head>
    <title>实时文本显示</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <h1>当前值: <span id="current_val">{{ current_val }}</span></h1>
    <form method="POST">
        <input type="text" name="new_val" placeholder="输入新值">
        <button type="submit">修改</button>
    </form>

    <script>
        // 每隔1秒请求一次最新值并更新页面
        setInterval(function() {
            $.get('/get_val', function(data) {
                $('#current_val').text(data.val);
            });
        }, 1000);
    </script>
</body>
</html>

3. 高效实时版：WebSocket主动推送（Flask-SocketIO） #

当val被修改时，服务器主动推送新值给所有客户端，实时性更好，适合低延迟场景。

先安装依赖：

pip install flask-socketio

后端代码：

from flask import Flask, render_template, request
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'
socketio = SocketIO(app)
val = "初始值"

@app.route('/', methods=['GET', 'POST'])
def index():
    global val
    if request.method == 'POST':
        new_val = request.form.get('new_val')
        if new_val:
            val = new_val
            # val修改时主动推送给所有客户端
            socketio.emit('update_val', {'val': val})
    return render_template('index.html', current_val=val)

# 客户端连接时发送当前val
@socketio.on('connect')
def handle_connect():
    emit('update_val', {'val': val})

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

更新templates/index.html，加入WebSocket监听逻辑：

<!DOCTYPE html>
<html>
<head>
    <title>实时文本显示</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/socket.io@4.0.0/dist/socket.io.min.js"></script>
</head>
<body>
    <h1>当前值: <span id="current_val">{{ current_val }}</span></h1>
    <form method="POST">
        <input type="text" name="new_val" placeholder="输入新值">
        <button type="submit">修改</button>
    </form>

    <script>
        var socket = io();
        // 接收服务器推送的最新val并更新页面
        socket.on('update_val', function(data) {
            $('#current_val').text(data.val);
        });
    </script>
</body>
</html>

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