事件 - htmx:responseError

htmx:responseError 是 HTMX 提供的一个事件，用于在接收到来自服务器的响应后，但处理过程中发生错误时触发。这个事件不同于 htmx:sendError（发送失败）或 htmx:loadError（加载资源失败），它专门表示：

服务器响应成功到达，但内容解析、处理、替换过程中 出错，HTMX 无法完成预期行为。

这是 HTMX 中最常用且最有用的事件之一，服务器返回除 20*、30* 外的响应码都会触发该事件，如：401、404、500等。

事件参数

• detail.xhr - XMLHttpRequest
• detail.elt - 触发请求的元素
• detail.target - 请求的目标
• detail.requestConfig - AJAX请求的配置

示例代码

<div hx-get="/broken-html" hx-trigger="click" hx-target="#output" hx-swap="innerHTML">
  加载损坏的 HTML
</div>

<div id="output"></div>

<script>
  document.body.addEventListener("htmx:responseError", function (event) {
    console.error("HTMX 处理响应出错！", event.detail);
    alert("响应处理失败，请检查返回的 HTML 或目标元素。");
  });
</script>

以上是全局监听，也可以在触发 HTTP 请求的元素中局部监听：

<button type="button" 
    hx-post="login" 
    hx-on:htmx:response-error="console.log('error message');"<!-- 注意这里的写法 -->
>Login</button>