事件 - htmx:beforeRequest

htmx:beforeRequest 是 HTMX 在准备发起 AJAX 请求前触发的事件。

这时，HTMX 已经准备好所有请求参数（URL、方法、headers、body 等），你可以：

• 检查或修改即将发出的请求；

• 取消请求（event.preventDefault()）；

• 添加或修改请求头；

• 调试或注入认证信息、CSRF Token 等。

事件参数

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

触发时机：

1. 用户操作触发了 HTMX 请求（如点击按钮）；

2. HTMX 完成参数准备（但尚未发送）；

3. 触发 htmx:beforeRequest 事件；

4. 然后才发送请求。

示例：添加自定义请求头

<button hx-get="/api/data" hx-target="#result">加载数据</button>
<div id="result"></div>

<script>
  document.body.addEventListener("htmx:beforeRequest", function (event) {
    const xhr = event.detail.xhr;

    // 添加 Authorization 头部
    xhr.setRequestHeader("Authorization", "Bearer my_token_123");

    // 添加自定义 Header
    xhr.setRequestHeader("X-Debug-Mode", "true");
  });
</script>

示例：阻止请求发出

<script>
  document.body.addEventListener("htmx:beforeRequest", function (event) {
    const url = event.detail.requestConfig.url;

    if (url.includes("delete")) {
      const confirmed = confirm("你确定要删除吗？");
      if (!confirmed) {
        event.preventDefault(); // 取消请求
        console.log("用户取消了删除操作");
      }
    }
  });
</script>