详解 hx-select 与 OOB 的区别及混合使用时的注意事项
hx-select 在《一文读懂 HTMX OOB 带外交换》这篇文章中已经详细介绍了 HTMX OOB(带外交换)的用法。今天这篇文章就来介绍 hx-select 属性的用法,这个用法与 OOB 有着几乎可以说是相反的功能: OOB 是允许从云服务器的一次响应中同时交换到页面的多个元素; hx-select 是允许从云服务器的一次响应中的多个元素中选择性地只交换一个元素的内容; 示例代码 客户端 HTML <!-- index.htm --> <div id="target1">target1</div> <div id="t
一文读懂 HTMX OOB 带外交换
什么是 OOB OOB - Out Of Band 交换,即“带外交换”。 这个元素不是替换发起请求的那个元素,也可以不是 hx-target 指定的元素,而是替换(或插入)页面中其它位置的某个已有 DOM 元素。交换允许 HTMX 从响应中插入内容到非当前 hx-target 所指定的地方。 hx-swap-oob 是 HTMX 中的一个非常实用的 “交换方式属性”,用于在服务端返回的 HTML 中指示,即使这个 HTML 是从异步请求返回的,也可以让它作用于页面中其它的元素(而非触发请求的元素)。 应用场景 这在以下场景中特别有用: 从服务器返回局部片段,同时更新页面多个区域 弹窗控制、消
htmx afterRequest事件与afterSwap事件失效的场景及解决方法
使用 htmx 进行开发产品,然后部署到阿里云、Cloudflare、AWS 等云服务器是我目前主要的做法。后端开发语言会根据情况采用 Python 或者 Golang,至于前端就采用 htmx 库。可能是因为没有认真地研读过 htmx 源码,加上有时候懒散没有认真思考,所以在使用的过程中也会遇到一些看似莫名其妙但
动态代理IP:利用ScraperAPI打造不被侦测的Python网页爬虫
现在的电商网站、社交平台、金融平台等大型网站都会有网页爬虫的风控及检测机制,除了常见的 HTTP Headers之外,大部分的网站还加入了 AI 反爬虫的功能,一旦被检测到就会触发人机验证机制,严重的甚至会直接封 IP 地址。IP 地址被封后就不得不使用代理 IP 来继续爬取。
想要降低网页爬虫被检测到的方法之一,就
HTMX 实现数据加载时加载中动画
在前端开发中,因为网络延迟、后台数据处理等原因(特别是后台部署在 VPS、ECS 等云服务器时网络都会有延迟),用户的操作响应会有延迟,通常都会给出进度条、加载中等的提示告知用户系统在正常工作中。使用其它框架进行开发时都会有对应的组件,而且可以通过 JavaScript 进行控制。但使用 hx-get、hx-post