当前位置: 首页 > 科技观察

是否可以在不使用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。点击加载数据本例展示如何点击加载数据表中的下一页,关键是最后一行:加载更多代理...此行包含一个按钮,该按钮将用下一页结果替换整行(其中将包含一个用于加载下一页结果的按钮)。单击“加载更多代理...”按钮时,将加载一页数据并将其附加到表中。延迟加载这个例子展示了如何延迟加载页面上的元素。我们从这样的初始状态开始:
当我们加载图表时,它会显示一个进度指示器,然后通过CSS过渡加载图表并逐渐淡入视图:.htmx-settlingimg{opacity:0;}img{transition:opacity300msease-in;}这个例子的效果是先显示一个loadingindicator,然后再加载一张图片,就是通常的延迟加载效果。Git存储库:https://github.com/bigskysoftware/htmx。