HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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:<time interval>:如果 etriggers 再次倒计时将从头开始，则在给定时间后触发请求。
  • throttle:<time interval>:与延迟相同，但如果事件在限制结束之前发生，则事件将被丢弃。因此请求将在时间 p 结束时触发。
  • from:<CSS Selector>: 等待不同元素的事件。这可用于在键盘快捷键上触发请求。
<div hx-post="/mouse_leave" hx-trigger="mouseleave once">
 [Here Mouse, Mouse!]
</div>

触发过滤器:您可以将触发过滤器应用于触发请求。为此，您可以在事件名称后使用方括号 ([])。以下示例仅在元素上单击 Control 时触发

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

特殊事件:有一些特殊事件要使用 hx-trigger 属性。

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

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

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

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

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

<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 和 red 类，因此当 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>
❮ 上一节 下一节 ❯