htmlx 無js 頁面交互 · PHP/Python/前端/Linux 等等學習筆記

[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 中