Flask如何在POST API接收颜色数据时自动渲染对应HTML页面

现有代码核心问题 #

• 模板变量不匹配：视图函数给模板传递的参数是fname，但各颜色模板中调用的是{{ green }}/{{ red }}/{{ orange }}，变量名对不上导致页面没有对应内容展示。
• 无自动跳转逻辑：没有配置页面自动刷新跳转的规则，无法实现渲染后返回首页的需求。
• 静态资源路径错误：index.html中css引入路径末尾多了斜杠，可能导致样式加载失败。
• 场景注意：如果你是通过AJAX发送POST请求，接口返回的HTML不会自动渲染到当前页面，需要前端主动替换页面内容，或者改用form表单提交POST请求。

修正代码 #

app.py #

from flask import Flask, render_template, jsonify, request
import time
import os, sys
import json
app = Flask(__name__)

@app.route("/")
def home():
   return render_template('index.html')

@app.route("/api/green", methods=['POST'])
def green():
   data = request.get_json()
   templateData = {
     'green' : data["green"],
     'redirect_delay': 5 # 跳转等待时长，单位秒，可自行修改
   }
   return render_template('green.html', **templateData)

@app.route("/api/red", methods=['POST'])
def red():
   data = request.get_json()
   templateData = {
     'red' : data["red"],
     'redirect_delay': 5
   }
   return render_template('red.html', **templateData)

@app.route("/api/orange", methods=['POST'])
def orange():
   data = request.get_json()
   templateData = {
     'orange' : data["orange"],
     'redirect_delay': 5
   }
   return render_template('orange.html', **templateData)
if __name__ == "__main__":
   app.run(host='0.0.0.0', port=5000, debug=True)

index.html #

<!DOCTYPE html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../static/style.css">
</head>
<body>
    
    <div class="content container">
        {% block main %}{% endblock main %}
    </div>
</body>
</html>

颜色页面示例（green.html，red、orange页面逻辑一致，仅变量名对应即可） #

{% extends 'index.html' %}
{% block main %}
<!-- 自动跳转配置，redirect_delay参数从视图传入，可统一修改跳转时长 -->
<meta http-equiv="refresh" content="{{ redirect_delay }}; url=/">
<h2>{{ green }}</h2>
{% endblock main %}

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