如何将Flask/Python后端数据加载到HTML textarea中回显

你的代码存在两处核心错误，会导致历史响应无法正常回填，按以下步骤修改即可实现需求：

• 表单控件使用错误：HTML不存在type="textarea"的input标签，多行输入必须使用原生<textarea>闭合标签
• 后端传参与模板取值逻辑不匹配：直接传递查询结果列表到模板，未提取对应字段值，模板无法获取要回填的内容

后端（app.py）修改 #

调整GET请求的参数传递逻辑，提取用户历史响应内容单独传递，POST请求处理完成后增加重定向避免表单重复提交，修正冗余的update语句：

@app.route("/responses", methods=["GET", "POST"])
@login_required
def responses():
    """Continue student application"""
    if request.method == "GET":
        user_id = session["user_id"]
        # 查询用户历史提交记录
        responses = db.execute(
            "select * from extended_responses where user_id = ?",
            user_id)
        # 提取历史响应内容，无记录则赋值为空字符串
        existing_response = responses[0]["response"] if len(responses) > 0 else ""
        return render_template("responses.html", existing_response=existing_response)
    # POST请求处理逻辑
    user_id = session["user_id"]
    response = request.form.get("response")
    responses = db.execute(
        "select * from extended_responses where user_id = ?",
        user_id)
    if len(responses) > 0:
        # 已有记录则更新
        db.execute("update extended_responses set response = ? where user_id = ?", response, user_id)
    else:
        # 无记录则新增
        db.execute("INSERT INTO extended_responses (user_id, response) VALUES (?, ?)", user_id, response)
    # 重定向回当前页面，避免刷新重复提交表单
    return redirect("/responses")

前端模板（responses.html）修改 #

替换错误的input控件为标准textarea标签，增加Jinja2判断逻辑，存在历史内容时直接填充到textarea标签内部，无内容时自动显示placeholder：

{% extends "layout.html" %}

{% block title %}
    Responses
{% endblock %}

{% block main %}
<form action="/responses" method="post">
    <div class="mb-3">
        <label for="response">Enter response here:</label><br>
        <textarea 
            class="form-control mx-auto w-auto" 
            autocomplete="off" 
            id="response" 
            name="response" 
            placeholder="Enter your response here"
        >{% if existing_response %}{{ existing_response }}{% endif %}</textarea>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>
{% endblock %}

注意事项 #

• <textarea>是闭合标签，默认值必须写在开标签和闭标签之间，不能像input一样通过value属性赋值
• 当existing_response为空时，textarea标签内部无内容，浏览器会自动展示预设的placeholder提示，完全匹配需求
• 后端提前提取好需要的字段值再传给模板，能简化模板逻辑，减少取值报错的概率

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