企业🤖AI智能体构建引擎，智能编排和调试，一键部署，支持私有化部署方案 广告
[TOC] > [home](https://htmx.org/docs/#caching) ## 概述 htmx,使得在不使用大量 JavaScript 代码的情况下，能够在前端实现动态的、即时的用户体验 ## 语法 ### 请求方式 ``` hx-get Issues a GET request to the given URL hx-post Issues a POST request to the given URL hx-put Issues a PUT request to the given URL hx-patch Issues a PATCH request to the given URL hx-delete Issues a DELETE request to the given URL ``` ### 触发方式 ``` change 表单元素input, textarea & select form 表单 click 所有元素 ``` 触发调节 ``` once 只触发一次 changed 当元素值更改时,提交 delay:<time interval> 延迟触发 throttle:<time interval> 节流 form:<CSS Selector>- 侦听不同元素上的事件。这可以用于键盘快捷键之类的东西。 every 2s 轮询每两秒 ``` ### 替换目标 ``` innerHTML the default, puts the content inside the target element outerHTML replaces the entire target element with the returned content afterbegin prepends the content before the first child inside the target beforebegin prepends the content before the target in the targets parent element beforeend appends the content after the last child inside the target afterend appends the content after the target in the targets parent element delete deletes the target element regardless of the response none does not append content from response (Out of Band Swaps and Response Headers will still be processed) ``` ## 示例 ### hello world test.php ``` <?php echo "<h1>hello world</h1>"; ``` test.html ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script> </head> <body> <div hx-post="/test.php" hx-trigger="mouseenter"> [Here Mouse, Mouse!] </div> </body> </html> ``` ## 触发 input ``` <input type="text" name="q" hx-get="/trigger_delay" hx-trigger="keyup changed delay:500ms" hx-target="#search-results" placeholder="Search..." > <div id="search-results"></div> ``` 当input 修改时,结果返回到 search-results 中