事件 - htmx:afterRequest

此事件在 AJAX 请求完成后触发，无论是请求成功（尽管可能返回远程错误代码，例如404）还是网络错误。此事件可以与 htmx:beforeRequest 配对使用，以围绕请求周期包装行为。

这时候响应数据已经收到，页面内容已根据 hx-target 和 hx-swap 更新完成，你可以用这个事件做一些通用的操作，比如：

• 隐藏 loading 状态

• 日志记录

• 统一错误处理或提示

• 表单重置、动画处理等

事件参数

• detail.elt - 发送请求的元素
• detail.xhr - 这XMLHttpRequest
• detail.target - 请求的目标
• detail.requestConfig - AJAX请求的配置
• detail.successful - 如果响应具有 20x 状态代码或 detail.isError = false 在 htmx:beforeSwap 事件中被标记，则为 true，否则为 false
• detail.failed - 如果响应没有 20x 状态代码或者 detail.isError = true 在 htmx:beforeSwap 事件中被标记，则为 true，否则为 false

示例代码

全局监听：

<script>
  document.body.addEventListener('htmx:afterRequest', function(event) {
    console.log('HTMX 请求完成！');
    console.log('请求信息：', event.detail.requestConfig);
    console.log('响应信息：', event.detail.xhr.responseText);
  });
</script>

局部监听：

<button type="button"
    hx-post="/test"
    hx-on:htmx:after-request="console.log('after-request');"
>Submit</button>