HTMX 简介
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
介绍
你好！😎
在不断发展的 Web 开发领域，服务器端和客户端脚本之间的界限日益模糊，一种名为 HTMX 的工具应运而生。
它为那些厌倦了繁琐的 JavaScript 框架的用户提供了简洁易用的方案。HTMX 仅需 HTML 即可利用 AJAX、WebSocket 和服务器发送事件的强大功能，让您能够轻松创建网页。
HTMX是什么？
HTMX 是一个小巧而强大的 JavaScript 库，它扩展了 HTML 的功能，无需编写 JavaScript 代码即可实现网页的动态更新。HTMX 的设计理念源于渐进增强和非侵入式 JavaScript，它能帮助您创建现代化的、用户友好的 Web 应用程序。HTMX 旨在成为您 HTML 的得力助手，赋予其前所未有的强大功能，同时又能有效控制复杂性。
想象一下，你可以用简单的 HTML 属性更新网页内容、提交表单并响应服务器端事件。这就是 HTML 带你进入的领域：一个快速、响应迅速且优雅的网页世界，这一切都无需编写任何 JavaScript 代码。😆
HTMX的优势
HTMX具有多种优势，包括但不限于以下几点：
- 易用性：它就像功能强大的HTML，但比传统的JavaScript框架更容易管理。
- 轻量级：无需下载大型文件，让您的网站速度更快。
- 渐进增强：直接在现有 HTML 之上运行，实现渐进增强。
创建一个简单的登录表单
首先，我们将创建一个简单的后端 PHP 文件来处理请求。创建一个名为“login_handler.php”的新文件，并填充以下内容：
<?php
$username = $_POST['username'];
echo '<p>Welcome, ' . htmlspecialchars($username) . '</p>';
?>
由于重点在于 HTML，以上代码并不复杂。它只是显示用户在用户名栏中输入的内容。通常情况下，你还需要身份验证等功能，但我把这部分留给你自己去探索。
为了演示 HTML，我们来创建一个简单的登录表单，并使用 Bootstrap 进行样式设计。创建一个名为“index.html”的新文件，并填充以下代码。别担心，我会在下面解释这段代码的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Login Form</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<form hx-post="login_handler.php" hx-target="#login-response" hx-swap="outerHTML" class="card p-4">
<div class="mb-3">
<label for="username" class="form-label">Username:</label>
<input type="text" id="username" name="username" required class="form-control">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" required class="form-control">
</div>
<button type="submit" class="btn btn-dark">Log In</button>
</form>
<div id="login-response"></div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/htmx.org"></script>
</html>
我们在头部导入了 Bootstrap 样式表。
之后，我们创建登录表单，并使用 hx-post 指令将表单数据通过 POST 请求提交到后端“login_handler.php”。
hx-target 和 hx-swap 属性协同工作，根据服务器的响应更新页面内容。当用户点击登录按钮时，HTML 会立即将表单数据发送到服务器，并在“login-response”div 中显示响应，整个过程无需刷新页面。😁
运行示例
要显示以上页面，您可以使用以下php命令：
php -S localhost:8000
这将启动一个简单的HTTP服务器，接下来通过以下方式访问页面：
http://localhost:8000
请尝试输入用户名和密码，然后点击登录按钮。响应将立即显示。
结论
这里我做了一个非常简单的HTMLMX入门介绍。希望您能从中有所收获。我本人也是HTMLMX新手，但我很喜欢学习它。
如果您有任何好的资源，请随时分享。
和往常一样，您可以在我的 GitHub 上找到示例代码：
https://github.com/ethand91/simple-htmx-form
祝你编程愉快！😎
喜欢我的作品吗？我发布的内容涵盖各种主题，如果您想看更多，请点赞并关注我。
另外，我超爱咖啡。
如果您想学习算法模式以在编程面试中脱颖而出，我推荐[以下课程]( https://algolab.so/p/algorithms-and-data-structure-video-course?affcode=1413380_bzrepgch )。
文章来源：https://dev.to/ehand91/simple-introduction-to-htmx-18fg