不使用 Javascript 也可以和浏览器进行交互？( 三 ) _浏览器

这会告诉浏览器：当用户点击此 div 时，向 /messages 发出 PUT 请求并将响应加载到 div 。
触发请求
默认情况下，AJAX 请求由元素的自然事件触发：

input、textarea? 和select? 在change 事件上触发。
form 在提交事件上触发。
其他元素都由click 事件触发。

如果你想要不同的行为，可以使用 hx-trigger 属性来指定哪个事件将触发请求。
比如下面的一段代码表示在鼠标进入时触发到 /mouse_entered 的 POST 请求：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div hx-post="/mouse_entered" hx-trigger="mouseenter">[Here Mouse, Mouse!]</div></pre>

HTMX 还有很多使用的方式，可以前往官方文档 https://htmx.org/docs/ 了解更多。
示例下面我们用几个示例来简单说明下 htmx 是如何使用的。
点击加载数据这个例子展示了如何在数据表格中实现点击加载下一页，关键是最后一行：

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><tr id="replaceMe"><td colspan="3"><button class='btn' hx-get="/contacts/?page=2"hx-target="#replaceMe"hx-swap="outerHTML">Load More Agents... <img class="htmx-indicator" src=https://www.isolves.com/it/cxkf/bk/2022-07-18/"/img/bars.svg">

该行包含一个按钮，该按钮将用下一页结果替换整行（其中将包含一个用于加载下一页结果的按钮）。

文章插图

当点击 Load More Agents... 按钮后会加载一页数据附加到表格中去。
延迟加载这个例子展示了如何在页面上延迟加载元素。我们从如下所示的初始状态开始：
【不使用 Javascript 也可以和浏览器进行交互？】

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div hx-get="/graph" hx-trigger="load"><imgalt="Result loading..." class="htmx-indicator" width="150" src=https://www.isolves.com/it/cxkf/bk/2022-07-18/"/img/bars.svg"/>