Htmx。制作网络应用程序的最新旧方法

简介

Htmx是一个JavaScript库，用于执行AJAX请求，触发CSS转换，以及直接从HTML元素调用WebSocket和服务器发送的事件。Htmx可以让你用简单的标记建立现代和强大的用户界面。

这个库的重量为~10KB（min.gz'd），它是无依赖性的（也就是说，它不需要任何其他的JavaScript包来运行），而且它还与IE11兼容。

在本教程中，我们将探索htmx的强大功能，同时涵盖以下部分。

• 安装htmx
• 用htmx发送AJAX请求
• 自定义htmx输入验证
• 用htmx触发CSS动画

安装htmx

你可以通过下载htmx源文件或在你的标记中直接包含其CDN来开始使用htmx，如下所示。

<script src="https://unpkg.com/htmx.org@1.3.3"></script>

上面的脚本在你的网页上加载当前稳定版本的htmx，在写这篇文章时，它是1.3.3版本。一旦完成，你就可以在你的网页上实现htmx功能。

用htmx发送AJAX请求

Htmx提供了一组属性，允许你直接从一个HTML元素发送AJAX请求。可用的属性包括。

• hx-get - 向提供的URL发送GET 请求
• hx-post - 向提供的URL发送POST 请求
• hx-put - 向提供的URL发送PUT 请求
• hx-patch - 发送PATCH 请求到所提供的URL。
• hx-delete - 发送DELETE 请求到所提供的URL。

代码示例

<button hx-get="http://localhost/todos">Load Todos</button>

上面的代码示例告诉浏览器，当用户点击按钮时，它会向提供的URL发送一个GET 请求(hx-get)，在这种情况下，这个URL是 [http://localhost/todos](http://localhost/todos).

默认情况下，从任何htmx请求返回的响应将被加载到发送请求的当前元素中。在 "AJAX请求的目标元素 "部分，我们将探讨如何在另一个HTML元素中加载响应。

针对AJAX请求的目标元素部分，我们将探讨如何在另一个HTML元素中加载响应。

触发请求

你应该注意，htmx中的AJAX请求是由元素的自然事件触发的。例如，input, select**,**和textarea 是由onchange 事件触发的，而form 是由onsubmit 事件触发的，而其他的都是由onclick 事件触发的。

在你想修改触发请求的事件的情况下，htmx为此提供了一个特殊的hx-trigger 属性。

<div hx-get="http://localhost/todos" hx-trigger="mouseenter">
    Mouse over me!
</div>

在上面的例子中，当且仅当用户的鼠标悬停在div上时，GET 请求将被发送到提供的URL。

触发器修改器

上一节中提到的hx-trigger 属性接受一个额外的修改器，以改变触发器的行为。可用的触发器修改器包括。

• once - 确保一个请求只发生一次
• changed - 如果HTML元素的值发生了变化就发出请求
• delay:<time interval> - 在发出请求之前等待给定的时间（例如，delay-1s ）。如果事件再次触发，倒计时被重置
• throttle:<time interval> - 在发出请求前等待给定的时间（例如：throttle:1s ）。但与延迟不同的是，如果在达到时限之前有一个新的事件发生，该事件将在一个队列中，因此它将在前一个事件的结束时触发
• from:<CSS Selector> - 在不同的元素上监听该事件

代码示例

<input
    type="text"
    hx-get="http://localhost/search"
    hx-trigger="keyup changed delay:500ms" />

在上面提供的代码示例中，一旦用户对输入元素执行了keyup 事件（即用户在输入框中输入任何文本），并且其先前的值发生了变化，浏览器将自动发送一个GET 请求到 [http://localhost/search](http://localhost/search)500ms后。

用htmx-trigger 属性进行轮询

在htmx-trigger属性中，你也可以指定每n秒，而不是等待一个触发请求的事件。有了这个选项，你可以每隔n秒向一个特定的URL发送一个请求。

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

上面的代码样本告诉浏览器每隔2秒向/history 端点发出一个GET请求，并将响应加载到div中。

针对AJAX请求的元素

在前几节中，我们提到htmx中的AJAX请求的响应将被加载到发出请求的元素中。如果你需要将响应加载到一个不同的元素中，你可以使用hx-target 属性来实现这一点。这个属性接受一个CSS选择器，并自动将AJAX响应注入一个具有指定选择器的HTML元素中。

我们可以修改我们的to-dos样本以适应这种情况。

<button hx-get="http://localhost/todos" hx-target="#result">
    Load Todos
</button>
<div id="result"></div>

与之前的例子不同，这个新的代码样本将请求发送至 [http://localhost/todos](http://localhost/todos)并在我们的div中加载响应，id=result 。

将返回的HTML置换到DOM中

与hx-target 类似，hx-swap 属性用于定义返回的AJAX响应在DOM中的加载方式。支持的值包括。

• innerHTML - 默认值，该选项将在发送请求的当前元素中加载AJAX响应
• outerHTML - 该选项将用返回的响应替换整个发送请求的元素
• afterbegin - 将响应作为发送请求的元素的第一个子元素加载。
• beforebegin - 将响应作为触发请求的实际元素的父元素来加载
• beforeend - 在发送请求的元素的最后一个子元素之后加载并附加AJAX响应。
• afterend - 与前者不同，它将AJAX响应附加在发送请求的元素之后
• none - 该选项不会附加或预置AJAX请求的响应。

请求指标

在发送AJAX请求时，让用户知道后台正在发生的事情通常是很好的做法，因为浏览器默认不会自动这样做。在htmx中，你可以通过htmx-indicator 类轻松实现这一点。

请看下面的代码示例。

<div hx-get="http://path/to/api">
     <button>Click Me!</button>
     <img
        class="htmx-indicator"
        src="path/to/spinner.gif"
      />
</div>

用htmx-indicator 类定义的任何HTML元素的不透明度默认设置为0，因此使该元素不可见但存在于DOM中。

而且，当你发出一个AJAX请求时，htmx将自动添加一个新的htmx-request 类到发送请求的元素。这个新的htmx-request 类将导致带有htmx-indicator 类的子元素过渡到不透明度为1，因此显示指标。

请求数据

如果你的AJAX请求是由一个表单或输入元素触发的，默认情况下，htmx将自动包括你请求中所有输入字段的值。

但如果你想包括其他元素的值，你可以使用hx-include 属性和你想在请求中包括其值的所有元素的CSS选择器。

代码示例

<div>
    <button hx-post="http://path/to/api/register" hx-include="[name=username]">
        Register!
    </button>
    Enter Username: <input name="username" type="text"/>
</div>

就像上面的代码示例一样，当您向*/register*端点发出请求时，您的AJAX请求将自动在其正文中包含电子邮件字段。

过滤掉参数

Htmx还提供了另一个htmx-params 属性，您可以用它过滤出在发送AJAX请求时将提交的唯一参数。

<div hx-get="http://path/to/api/example" hx-params="*">
    Send Request
</div>

上面的代码样本将包括您页面上的所有输入元素作为您的请求参数。

所有可能的值包括。

• * - 将包括您网页上的所有参数，并在您的AJAX请求中发送。
• none - 在您的请求中不包括任何参数
• not <param-list> - 包括所有其他参数，但不包括以逗号分隔的参数名称列表
• <param-list> - 只包括列表中的所有逗号分隔的参数名称。

上传文件

使用htmx，你可以很容易地发送文件，如图片、视频、PDF等到你的后台进行处理，方法是在实际发送请求的元素的父元素中添加hx-encoding 属性，值为multipart/form-data 。

<form hx-encoding="multipart/form-data">
    Select File:
    <input type="file" name="myFile" />
    <button
      hx-post="http://path/to/api/register"
      hx-include="[name='myFile']"
    >
      Upload File!
    </button>
</form>

自定义htmx输入验证

Htmx默认与HTML5验证API集成，如果可验证的输入无效，将不会发出请求。这个功能对AJAX请求和WebSocket事件都有效。

除此以外，htmx还围绕验证发射事件，这在自定义输入验证和错误处理中相当有用。

可用的验证事件包括。

• htmx:validation:validate - 这个事件在添加自定义验证登录时很有用，因为它在一个元素被验证之前被调用
• htmx:validation:failed - 当元素验证返回false，即表示无效的输入时，该事件被触发。
• htmx:validation:halted - 当一个元素由于输入验证错误而无法发出请求时，这个事件被调用。

用htmx触发CSS动画

Htmx提供了一种方法，可以很容易地将平滑的CSS过渡附加到AJAX事件中，也可以在你的网页中普遍使用。

使用class-tool

htmxclass-tool 是一个扩展，你可以很容易地使用它来切换、添加或删除 一个HTML元素的特定类名，而无需编写任何JavaScript代码。

你可以利用这个扩展，在你的元素上添加classes 属性，然后指定动作，再加上你想添加或删除的类名。

<div classes="add sample-class:1s"></div>

就像上面的代码示例，一旦浏览器内容被加载，htmx将在1s后自动向div添加一个新的类(sample-class)。

还要注意的是，你可以通过用逗号(,)分隔每个动作来创建一个动作队列，或者通过用逗号(&)分隔多个动作来使其同时运行。

<!-- class tool queue -->

<div classes="add sample-class:1s, remove another-class:2s, toggle 3rd-class:1s"></div>

<!-- simultaneous actions -->

<div classes="add sample-class:1s & remove another-class:2s & toggle 3rd-class:1s"></div>

下面是一个切换元素的可见性的例子。

    <style>
      .demo.faded {
        opacity: 0.3;
      }
      .demo {
        opacity: 1;
        transition: opacity ease-in 900ms;
      }
    </style>
    <div class="demo" classes="toggle faded:1s">I'm Fading! ⚡</div>

总结

在这篇文章中，我们探讨了htmx的安装过程，如何发送AJAX请求，表单验证，以及无需编写任何JavaScript代码就能触发CSS动画。

Htmx提供了对WebSocket和服务器发送事件的实验性支持，本文没有涉及，因为它们仍在开发中。你可以从htmx文档中了解更多关于WebSocket和SSE的支持。

在GitHub上为htmx做贡献。

The postHtmx:制作网络应用的最新旧方法首次出现在LogRocket博客上。