是否可以在不使用Javascript的情况下与浏览器交互?_0
时间:2023-03-18 14:47:38
科技观察
Htmx是一个允许您直接从HTML访问现代浏览器功能的库,而不是使用javascript。要理解htmx,我们先看HTML中的a标签:Blog这个标签告诉浏览器:当用户点击这个链接时,发送一个HTTPGET到/blog请求并将响应内容加载到浏览器窗口中。然后让我们看看下面的HTML:点击我!这告诉htmx:当用户单击此按钮时,向/clicked发出HTTPPOST请求,并用响应中的内容替换带有idparent-div的DOM元素。Htmx扩展了HTML的核心思想,为HTML语言提供了更多的可能性:现在任何元素,不仅仅是超链接和表单,都可以发出HTTP请求。现在任何事件,不仅仅是点击或表单提交,都可以触发请求。现在可以使用任何HTTP动词,而不仅仅是GET和POST。现在任何元素,不仅仅是整个窗口对象,都可以成为更新请求的目标。请注意,当您使用htmx时,在服务器端您通常使用HTML而不是JSON进行响应。这让您可以使用原始的Web编程模型,使用超文本作为应用程序状态的引擎,甚至无需真正理解这个概念。另外,如果你愿意,你可以在使用htmx时使用data-前缀:ClickMe!InstallHtmx是一个无依赖性、面向浏览器的JavaScript库.这意味着使用它就像在文档头部添加一个npm对于npm风格的构建系统,也可以通过npm安装htmx:npminstallhtmx.org安装后需要使用相应的工具使用node_modules/htmx.org/dist/htmx.js(或.min.js),例如,您可以将htmx与一些扩展和项目特定代码捆绑在一起。如果您使用webpack来管理您的javascript:通过您最喜欢的包管理器(如npm或yarn)安装htmx。在index.js文件中导入htmx。导入“htmx.org”;如果要使用全局htmx变量(推荐),则需要将其注入窗口作用域:创建自定义JS文件。在index.js文件中导入此文件。导入“路径/到/my_custom.js”;然后添加以下代码:window.htmx=require('htmx.org');最后重新封装AJAXhtmx的核心是一套让你可以直接从HTML发出AJAX请求的属性:hx-get:向指定的URL发出GET请求。hx-post:向指定的URL发出POST请求。hx-put:向指定的URL发出PUT请求。hx-patch:向指定的URL发出PATCH请求。hx-delete:向指定的URL发送DELETE请求。这些属性中的每一个都需要一个URL来发出AJAX请求。当元素被触发时,元素将向给定的URL发出指定类型的请求:PutToMessages
这告诉浏览器:当用户点击这个div,向/messages发出PUT请求并将响应加载到div中。触发请求默认情况下,AJAX请求由元素的自然事件触发:input、textarea和select在change事件上触发。表单在提交事件时触发。所有其他元素都由点击事件触发。如果你想要不同的行为,你可以使用hx-trigger属性来指定哪个事件将触发请求。例如,下面的一段代码表示当鼠标进入时触发对/mouse_entered的POST请求:
[HereMouse,Mouse!] HTMX和很多使用方法,可以去官方文档https://htmx.org/docs/了解更多。范例下面我们通过几个范例来简单说明如何使用htmx。点击加载数据本例展示如何点击加载数据表中的下一页,关键是最后一行: