如何在Flask与HTMX间以JSON等非HTML格式交换数据？

当然可以用Flask返回JSON、字典这类结构化数据来更新页面，下面给你两种实用方案：

方案1：Flask返回JSON，前端用JS处理渲染 #

这种方式适合需要在前端灵活处理数据的场景，步骤如下：

1. Flask后端返回JSON #

修改app.py，用jsonify把数据转成标准JSON响应：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/someroute")
def test():
    data = [{"name": "test1"}, {"name": "test2"}, {"name": "test3"}]
    return jsonify(data)  # 自动设置响应头为application/json

2. 前端HTMX结合JS处理响应 #

在index.html里，通过HTMX的hx-on::after-request事件捕获响应数据，动态生成表格行替换目标元素：

<input name="name"
       hx-get="/someroute"
       hx-target="#results"
       hx-on::after-request="handleResponse(event)" />

<table>
    <th>Name</th>
    <tbody id='results'>
        <!-- 这里会被动态生成的行替换 -->
    </tbody>
</table>

<script>
function handleResponse(event) {
    // 仅处理成功的请求
    if (event.detail.successful) {
        const data = event.detail.response;
        const resultsContainer = document.getElementById('results');
        // 清空原有内容
        resultsContainer.innerHTML = '';
        // 遍历数据生成表格行
        data.forEach(item => {
            const row = document.createElement('tr');
            const cell = document.createElement('td');
            cell.textContent = item.name;
            row.appendChild(cell);
            resultsContainer.appendChild(row);
        });
    }
}
</script>

方案2：Flask渲染HTML片段（更简洁的原生HTMX方式） #

你觉得直接返回HTML繁琐，其实可以把重复的HTML片段抽成独立模板，Flask负责渲染片段返回，HTMX直接替换目标，不用写JS：

1. 创建模板片段 #

在templates目录下新建_table_rows.html：

{% for item in data %}
<tr>
    <td>{{ item.name }}</td>
</tr>
{% endfor %}

2. Flask后端渲染片段返回 #

修改app.py，渲染这个模板片段并返回：

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/someroute")
def test():
    data = [{"name": "test1"}, {"name": "test2"}, {"name": "test3"}]
    return render_template('_table_rows.html', data=data)

3. 前端HTMX直接替换 #

index.html里无需额外JS，HTMX会自动把返回的HTML片段插入目标元素：

<input name="name"
       hx-get="/someroute"
       hx-target="#results" />

<table>
    <th>Name</th>
    <tbody id='results'>
        <!-- 这里会被渲染好的<tr>替换 -->
    </tbody>
</table>

补充说明 #

• 方案1适合需要对数据做额外前端处理（比如过滤、自定义格式化）的场景；方案2更贴合HTMX的原生设计，代码简洁、维护成本低。
• 用方案1时，必须确保Flask返回的是application/json类型响应（jsonify会自动处理），否则HTMX无法正确解析数据。

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