HTML中使用HTMX的hx-get属性实现无JavaScript的AJAX请求-html教程-PHP中文网

htmx 的 hx-get 必须依赖 javascript，它并非“无 js”，而是将 fetch 等逻辑封装进 htmx.js，通过 html 属性声明行为；浏览器原生忽略 hx-get，需加载脚本才能解析执行。

html中使用htmx的hx-get属性实现无javascript的ajax请求

HTMX 的 hx-get 本身**必须依赖 JavaScript**，所谓“无 JavaScript 的 AJAX”是常见误解——HTMX 就是一个 JavaScript 库，没有 JS 就根本不会运行。

为什么 hx-get 看起来像“不用写 JS”，但其实离不开 JS

HTMX 把请求逻辑从 fetch() 或 axios.get() 这类手动调用，转移到了 HTML 属性上，比如 hx-get="/api/data"。这降低了前端交互的编码门槛，但底层仍靠加载的 htmx.js 来解析这些属性、发起 XMLHttpRequest 或 fetch 请求、并替换 DOM。

没引入 <script src="https://unpkg.com/htmx.org@2.0.0"></script>，hx-get 属性会被浏览器完全忽略（就像写了个自定义属性）
禁用 JavaScript 后，所有 HTMX 行为（包括 hx-get、hx-post、hx-swap）全部失效
它不是“替代 JS”，而是“把 JS 逻辑声明式地写在 HTML 里”

hx-get 最小可用示例与关键参数

一个能跑起来的 hx-get 至少要指定目标 URL 和响应如何插入页面。默认行为是 GET 请求 + 替换触发元素的 outerHTML，但通常你要显式控制。

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

hx-get：必填，请求地址，支持相对路径（如 /users）或绝对 URL
hx-trigger：建议显式声明，比如 hx-trigger="click"，否则某些版本默认只在 load 时触发（易踩坑）
hx-swap：强烈建议设置，如 hx-swap="innerHTML"（替换内部）、hx-swap="beforeend"（追加到末尾），不设可能触发意外的 whole-page 替换
hx-target：指定响应内容插入哪个元素，用 CSS 选择器，如 hx-target="#result"

<button hx-get="/api/time" hx-trigger="click" hx-swap="innerHTML" hx-target="#time-display">
  获取当前时间
</button>
<div id="time-display"></div>

常见失败现象和调试方向

点按钮没反应？控制台没报错？大概率是这几个地方卡住了：

网络面板里看不到请求发出 → 检查 htmx.js 是否成功加载（看 Network tab 的 js 文件状态码）
请求发出了但页面没更新 → 查看响应是否为 200 + HTML 片段（HTMX 默认期望服务端返回 HTML，不是 JSON）
整个页面刷新了 → 可能是表单 submit 触发了默认行为，给 <form></form> 加 hx-boost="true" 或改用 <button type="button"></button>
响应内容插错位置 → 确认 hx-target 选择器匹配到真实存在的元素，且该元素未被后续 JS 删除

服务端配合要点（容易被忽略）

HTMX 不关心你用什么后端语言，但它对响应格式有隐含假设：

返回内容应为纯 HTML 片段（例如 <span>2024-06-12 14:30</span>），而非 JSON；若要返回 JSON，需额外配置 hx-ext="json-enc" 并处理解包逻辑

如果接口原本只返回 JSON，临时改成 HTML 可用 Python Flask 示例：

@app.route("/api/time")<br>def get_time():<br>  return f"<time>{datetime.now().isoformat()}</time>"

注意响应头：避免 Content-Type: application/json，应为 text/html（多数模板引擎默认满足）

真正容易被忽略的是：HTMX 的“简洁”建立在服务端返回结构可控的前提下。一旦后端返回的是嵌套 JSON 或需要客户端做数据映射，你就得立刻跳出 HTMX 声明式逻辑，转回手写 JS 处理 —— 这时候硬撑反而更费劲。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南