HTMX - AJAX

上一页
下一页

HTMX 的主要目的是直接从 HTML 发送 AJAX 请求，无需使用 JavaScript，这可以通过 HTMX 属性实现。当触发特定事件时，以下列出的属性之一将向给定的 URL 发起 AJAX 请求。

HTMX 属性

下面列出了最常用的属性，这些属性用于直接从 HTML 发送 AJAX 请求。每个属性都接收一个 URL 来发出 AJAX 请求。

  • hx-get: 此属性对给定的 URL 执行 GET 请求。
  • hx-post: 此属性对给定的 URL 执行 POST 请求。
  • hx-put: 此属性对给定的 URL 执行 PUT 请求。
  • hx-patch: 此属性对给定的 URL 执行 PATCH 请求。
  • hx-delete: 此属性对给定的 URL 执行 DELETE 请求。

HTMX 中 AJAX 请求的示例

当元素被触发时，该元素将向给定的 URL 发出指定类型的请求。

触发请求

AJAX 请求由自然事件触发，例如元素上的鼠标移入或移出。像输入框、文本区域和选择框在更改事件时触发。表单在提交事件时触发，其他元素在点击事件时触发。要自定义这些行为，可以使用 hx-trigger 属性指定哪个事件将是请求的原因。

<div hx-post="/mouse_leave" hx-trigger="mouseleave">
 [Here Mouse, Mouse!]
</div>

触发器修饰符：如果希望请求只触发一次，可以修改行为，只需为触发器添加 once 关键字。您可以查看下面列出的修饰符。

  • once: 仅触发一次请求。
  • changed: 如果元素的值已更改，则触发请求。
  • delay:<时间间隔>: 在给定时间后触发请求，如果再次触发，则倒计时将从头开始。
  • throttle:<时间间隔>: 与延迟相同，但如果事件在限制结束前发生，则该事件将被丢弃。因此，请求将在时间结束时触发。
  • from:<CSS 选择器>: 等待不同元素的事件。这可用于在键盘快捷键上触发请求。
<div hx-post="/mouse_leave" hx-trigger="mouseleave once">
 [Here Mouse, Mouse!]
</div>

触发器过滤器：您可以应用触发器过滤器来触发请求。为此，您可以在事件名称后使用方括号 ([])。以下示例仅在元素的 Control-Click 上触发。

<div hx-get="/clicked" hx-trigger="click[ctrlKey]">
 Control Click
</div>

特殊事件：有一些特殊事件可用于 hx-trigger 属性。

  • load: 元素首次加载时触发。
  • revealed: 元素首次滚动到视口时触发。
  • intersect: 元素首次与视口相交时触发。这支持两个附加选项
    • root:<选择器>: 交叉点的根元素的 CSS 选择器。
    • threshold:<浮点数>: 0.0 到 1.0 表示触发事件所需的交叉量。
如果您有高级用例，还可以使用自定义事件来触发请求。

轮询：当您希望元素不等待事件时，可以通过使用 every 作为 hx-trigger 属性的值，在元素上设置轮询。

如下面的伪代码所示，它每 2 秒发出一次对 /content 的 GET 请求，并将响应加载到 div 元素中。

<div hx-get="/content" hx-trigger="every 2s"></div>

加载轮询：还有另一种轮询，即加载轮询，其中元素指定一个带有指定时间延迟的 load 触发器，并用响应替换自身。

<div hx-get="/messages"
 hx-trigger="load delay:1s"
 hx-swap="outerHTML"
>
</div>

请求指示器

发出 AJAX 请求时，您需要通知用户请求已启动。您可以对子元素使用 htmx-indicator 类，如下面的伪代码所示。

<button hx-get="/click">
 Click Me!
    <img class="htmx-indicator" src="/spinner.gif">
</button>

在此代码中，我们有一个按钮，当单击该按钮时，将触发 GET 请求，并且此时将弹出一个加载动画，向用户显示 AJAX 请求已启动。

目标

您可以使用 hx-target 属性设置要加载请求响应的元素。在此代码中，您可以看到请求的响应将呈现到 div#search-results 元素上。

<input type="text" name="q"
 hx-get="/trigger_delay"
 hx-trigger="keyup delay:500ms"
 hx-target="#search-results"
>
<div id="search-results"></div>

交换

内容替换目标元素的 innerHTML。您可以使用 hx-swap 属性修改此行为。有一些预定义的值，例如 innerHTML、outerHTML、afterbegin 等值。

  • 变形交换：变形交换尝试将新内容合并到现有 DOM 中。
  • 视图过渡：视图过渡 API 允许开发人员在不同的 DOM 状态之间创建动画过渡，但目前并非所有浏览器都支持它。
  • 交换选项：当您使用 hx-swap 属性时，交换中有一些特定的选项。

交换修饰符出现在指定交换样式之后，并用冒号分隔。

同步

通过使用 hx-sync 属性在两个元素之间执行同步。当您希望来自一个元素的请求取代另一个元素的请求，或等待另一个元素的请求完成时，这将是必需的。

CSS 过渡

HTMX 支持无需使用 JavaScript 即可进行过渡，这是 HTMX 最好的特性之一。

<div id="div1">Original Content</div>

<div id="div1" class="red">New Content</div>

.red {
 color: red;
 transition: all ease-in 1s ;
}

两个 div 具有相同的 id 和第二个元素上的红色类，因此当 HTMX 交换此新内容时，定义的 CSS 将应用于新内容。

带外交换

如果要将响应中的内容直接交换到 DOM 中，可以使用 hx-swap-oob 属性，其值为 true。

<div id="message" hx-swap-oob="true">Swap me directly!</div>

参数

对于触发 AJAX 请求的元素，参数是必需的。导致请求的元素将包含其值（如果存在）。如果元素是表单，它将包含其中所有输入的值。

  • 文件上传：如果要通过 htmx 请求上传文件，可以将 hx-encoding 属性设置为 multipart/form-data。
  • 额外值：可以通过使用 hx-values 属性添加额外值。

确认请求

在触发和请求之前，最好确认请求，为此可以使用 hx-confirm 属性。这允许您使用简单的 javascript 对话框确认操作。

<button hx-delete="/account" hx-confirm="Are you sure?">
 Delete My Account
</button>
打印页面
上一页
下一页
广告