江苏龙网

  1. 主页 > 生活百科 > >

不使用 Javascript 也可以和浏览器进行交互？

浏览器


不使用 Javascript 也可以和浏览器进行交互？

文章插图
 
Htmx 是一个库，它允许你直接从 html 访问现代浏览器功能，而不是使用 JAVAscript 。
不使用 Javascript 也可以和浏览器进行交互？

文章插图
 
要理解 htmx，首先让我们看一下 HTML 中的 a 标签：
<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><a href=https://www.isolves.com/it/cxkf/bk/2022-07-18/"/blog">Blog这个标记会告诉浏览器：当用户单击此链接时，向 /blog 发出 HTTP GET 请求并将响应内容加载到浏览器窗口中 。
然后我们再看下面的 HTML：
<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><button hx-post="/clicked"hx-trigger="click"hx-target="#parent-div"hx-swap="outerHTML">Click Me!</button></pre>这告诉 htmx：当用户单击此按钮时，向 /clicked 发出 HTTP POST 请求并使用响应中的内容将元素替换为 id 为 parent-div 的 DOM 。
Htmx 将 HTML 的核心思想进行了扩展，为 HTML 语言提供了更多可能性：
  • 现在任何元素，不仅仅是超链接和表单，都可以发出 HTTP 请求 。
  • 现在任何事件，不仅仅是点击或表单提交，都可以触发请求 。
  • 现在可以使用任何 HTTP verb，而不仅仅是GET 和POST 。
  • 现在任何元素，不仅仅是整个window 对象，都可以成为请求更新的目标 。
请注意，当你使用 htmx 时，在服务器端你通常会使用 HTML 而非 JSON 进行响应 。这会让你使用原始 Web 编程模型，使用超文本作为应用程序状态的引擎，甚至你也不需要真正理解这个概念 。
另外如果你愿意，可以在使用 htmx 时使用 data- 前缀：
<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><a data-hx-post="/click">Click Me!</a></pre>安装Htmx 是一个无依赖、面向浏览器的 JavaScript 库 。这意味着使用它就像在文档头部添加一个 <script> 标记一样简单，无需复杂的构建步骤或系统 。
通过 CDN使用 htmx 的最快方法是通过 CDN 加载它 。你可以简单地将其添加到你的 head 标签中即可：
<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><script src=https://www.isolves.com/it/cxkf/bk/2022-07-18/"https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous">


推荐阅读


上一篇：11款常用浏览器横评：Edge最强 傲游不输Chrome

下一篇：开源流程引擎BPM哪个好？activiti、flowable、camunda？