如何使用HTMX更新两个HTML模板元素？

核心思路 #

要同时更新表格和图表两个独立区域，直接用HTMX的OOB（Out of Band）更新功能即可——它支持一次响应更新页面上多个指定元素，完美解决当前只能更新单个区域的问题。

步骤1：调整表单与页面结构 #

给表单加上HTMX提交属性，同时给表格、图表区域加上唯一ID，方便后续定位更新：

<div class="row">
    <div class="col-6">
        <form method="POST" class="post-form" 
              hx-post="{% url 'form_1' %}"
              hx-swap="none">
            {% csrf_token %} 
            {{form_1.as_p}}
            <button type="submit" class="save btn btn-light">提交</button>
        </form>
    </div>
</div>
<div class="row">
    <div class="col" id="table-area">
        {{ div_1|safe }}
        {{ script_1|safe }}
    </div>
</div>
<div class="row">
    <div class="col" id="chart-area">
        {{ div_2|safe }}
        {{ script_2|safe }}
    </div>
</div>

• hx-post指定表单提交的视图URL
• hx-swap="none"表示不需要替换表单本身，只处理响应中的OOB内容
• id="table-area"和id="chart-area"是后续OOB更新的定位标识

步骤2：编写OOB更新模板 #

新建一个模板文件（比如form_oob_response.html），把需要更新的两个区域内容放在这里，每个区域加上hx-swap-oob="true"属性：

<!-- 替换表格区域 -->
<div id="table-area" hx-swap-oob="true">
    {{ div_1|safe }}
    {{ script_1|safe }}
</div>

<!-- 替换图表区域 -->
<div id="chart-area" hx-swap-oob="true">
    {{ div_2|safe }}
    {{ script_2|safe }}
</div>

这个模板的作用是告诉HTMX：把这两个元素分别替换页面上对应ID的元素。

步骤3：修正视图函数 #

原视图的render参数写法错误，同时要加上HTMX请求判断，返回OOB模板：

def form_1(request):
    context = {}
    form = Form_1(request.POST or None)
    if request.method == "POST" and form.is_valid():
        form.save()
        # 执行计算，生成表格和图表的script、div
        script_1, div_1 = components(data_table)
        script_2, div_2 = components(fig)
        
        context['script_1'] = script_1
        context['div_1'] = div_1
        context['script_2'] = script_2
        context['div_2'] = div_2
        
        # 针对HTMX请求返回OOB更新模板
        if request.htmx:
            return render(request, "form_oob_response.html", context)
        # 非HTMX请求返回原页面（可选）
        return render(request, "form_1.html", context)
    
    context['form_1'] = form
    return render(request, "form_1.html", context)

• 注意request.htmx需要安装django-htmx包，它会给request对象添加这个属性来判断是否是HTMX请求
• 原代码中render(request, "data_table", "fig", context)是错误写法，render仅接受模板文件名和上下文两个核心参数

关于你补充代码的注意点 #

你提供的index_htmx相关代码已经用到了OOB，但有个小问题：

• hx-swap="beforeend"是往目标元素末尾追加内容，如果你想替换整个区域，应该改成hx-swap="innerHTML"或者直接省略（默认就是替换）

关键提醒 #

• OOB更新的核心是：响应中的元素ID必须和页面上的目标元素ID完全匹配
• 必须用HTMX的hx-post/hx-get发起请求，才能触发OOB更新逻辑
• 确保django-htmx已正确安装配置，否则request.htmx会报错

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