事件 - htmx:beforeSend

htmx:beforeSend 是 HTMX 在即将发送请求（GET、POST 等）之前触发的事件。你可以在这个事件中：

• 修改请求头（如添加 token）

• 添加/修改请求参数

• 阻止请求发送

• 显示 loading 动画

它相当于 AJAX 中 XMLHttpRequest 的 .open() 后、.send() 前的 hook。

详情

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

示例代码

<button 
  hx-get="/data" 
  hx-target="#result" 
  hx-swap="innerHTML">
  加载数据
</button>

<div id="result"></div>

<script>
  document.body.addEventListener("htmx:beforeSend", function(evt) {
    const xhr = evt.detail.xhr;
    console.log("准备发送请求到：", evt.detail.path);

    // 添加自定义头部
    xhr.setRequestHeader("X-Security-Token", "Security Token");

    // 显示加载动画
    document.querySelector("#result").innerText = "加载中...";
  });
</script>

应用场景

用途	示例
注入认证头	添加 JWT 或 API token
动态设置参数	在请求前动态修改 query 参数或表单数据
加载动画	请求开始前激活 spinner 或禁用按钮
请求统计	上报即将发送的请求路径或数据
请求拦截	根据条件取消请求：evt.preventDefault()