如何通过HTMX实现表单错误重渲染、成功跳转？

问题场景 #

现有登录表单代码如下：

<div id="login_form" hx-ext="response-targets">
    <form action="/login" method="POST" hx-boost="true" hx-target="#login_form" hx-target-400="#login_form" hx-swap="innerHTML">
        <!-- 表单字段省略 -->
        <button type="submit">Log in</button>
    </form>
</div>

需求：

• 错误时（后端返回400状态码+带错误提示的表单）：重渲染#login_form容器
• 成功时（后端返回200状态码+HX-Location响应头）：跳转到用户资料页

实际问题：成功时HTMX将用户资料页内容渲染到#login_form中，未执行跳转，hx-target优先级高于HX-Location头。

解决方案 #

方案1：后端调整状态码（推荐） #

登录成功时，后端返回204 No Content状态码，同时携带HX-Location响应头指向用户资料页。

HTMX对204状态码的默认处理逻辑是：不执行任何内容替换操作，仅响应HX-Location等头指令。这样既保留了错误时通过hx-target-400重渲染表单的逻辑，成功时直接触发页面跳转，无需修改前端代码。

方案2：前端添加事件拦截 #

若无法修改后端状态码，可在表单上添加hx-on::after-request事件，手动拦截并处理跳转：

<div id="login_form" hx-ext="response-targets">
    <form 
        action="/login" 
        method="POST" 
        hx-boost="true" 
        hx-target="#login_form" 
        hx-target-400="#login_form" 
        hx-swap="innerHTML"
        hx-on::after-request="
            const xhr = event.detail.xhr;
            if (xhr.status === 200 && xhr.getResponseHeader('HX-Location')) {
                window.location.href = xhr.getResponseHeader('HX-Location');
                event.preventDefault();
            }
        "
    >
        <!-- 表单字段 -->
        <button type="submit">Log in</button>
    </form>
</div>

这段代码会在请求完成后检查：如果是200状态且存在HX-Location头，就手动跳转页面，并阻止HTMX执行默认的内容替换操作。

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