htmx: hx-target:交换html与重新加载整个页面 - 腾讯云开发者社区

文章/答案/技术大牛

发布

HTMX：前端的 1984 时刻？

如果需要，我并不排斥撰写 javascript 来增加交互性：然而，这种方式构建的 UI 会导致用户和页面的每次交互都需要后端重新发送完整的 html 页面，这既浪费带宽，交互的方式又笨拙不流畅。...如果说 hx-get 这样的属性提供了页面中无处不在与服务器交互的能力，那么 hx-target 就提供了页面中无处不在的动态更新能力。这中动态更新能力是我们引入 javascript 的重要原因。...hx-swap：当服务器的相应返回时，内容该如何交换或者替换，默认是 innerHTML，也就是说 #search-results 内部的 HTML 会被服务器返回的数据替换。...javascript，就实现了整个三栏加载和更新逻辑。...如果你不是开发像 spreadsheet，google map 这样的重交互应用，基本上，你都能很好地用 HTMX 来取代现有的前端开发框架，重新回到以 HTML 为中心的轻量级前端开发上。

2K3 0

HTMX简介：无需JavaScript的动态HTML

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱体验地址：体验 HTMX允许你使用扩展的HTML语法代替 JavaScript 来实现交互性。...可编辑版本作为一个表单元素到达，其中包含x-put属性，该属性标识PUT HTML方法和要使用的端点。问题变成，HTMX如何实现这种“交换”和后续的PUT，而不做任何JavaScript呢？...实际上，我们得到了一个更细粒度的 HTML 语法，它只能加载片段而不是整个页面，并且可以提交Ajax请求。这是DRY原则在行动中的一个有趣的例子。...具有HTMX属性的表单POST form(hx-post="/todos", hx-target="#todo-list", hx-swap="afterbegin", _="on htmx:afterOnLoad...on htmx脚本是 Hyperscript 的一个例子，这是一种简化的脚本语言。它经常与HTMX一起使用，但并不严格属于HTMX或需要使用它。

2.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

htmx：后端主导的前端框架是啥样的？

那么，以「后端工程师」作为受众的前端框架是啥样的，他与前者有什么区别呢？介绍htmx htmx是一款在Django技术栈最近比较热门的前端框架。...当你在页面中引入htmx.org.js后，可以在HTML中书写以hx-开头的自定义属性。..." > 点我请求data hx-target指代「返回的HTML结构」会被注入到哪里。...比如下面这段代码是段结合htmx与alpine的HTML，其中以hx-开头的是htmx属性，以x-开头的是alphine属性： hx-target="this" hx-ext="alpine-morph...交互逻辑守恒本质来说，网页的最终消费品是HTML与CSS。开发者编写交互逻辑改变HTML与CSS。前端工程师习惯在网页中通过JS编写交互逻辑。后端工程师习惯在后端编写交互逻辑。

2K3 0

React vs HTMX ，谁更适合你？

hx-target 接受一个 CSS 选择器，并指示 HTMX 将交换逻辑应用于选定的元素。...HTMX 与 React 对比前面我们已经知道了什么是 HTMX 以及它是大概是怎么工作的，下面我们让它与 React 大概做个比较。...语法 HTMX：它扩展了 HTML，提供了直接在 HTML 中与服务器交互的能力，它优先考虑简介性和可读性：你好 code秘密花园 </...集成 HTMX：可以嵌入到任何 HTML 网页中，与那些可以返回原始 HTML 内容的后端技术可以非常丝滑的集成，比如 Node.js、Django、Laravel、Spring Boot、Flask...这意味着你可以在一个网页上同时使用 React 和 HTMX，它们在页面的不同部分起作用，甚至 React 组件也可以依赖 HTMX 属性。

2.2K2 1

回归初心，用纯 Python 构建现代化 Web 应用

HTMX 允许任何 HTML 元素（而不仅仅是和）向服务器发送请求，并用服务器返回的 HTML 片段更新页面的任何部分，而无需刷新整个页面。...逻辑与视图统一：可以在构建 HTML 的同时，无缝地嵌入 Python 的逻辑判断和循环。 2. HTMX 的魔法：hx-* 属性 HTMX 是 fasthtml 实现动态交互的秘密武器。...hx-target: 指定服务器返回的 HTML 片段应该更新哪个元素（使用 CSS 选择器，如 #my-div）。如果未指定，默认更新触发请求的元素自身。 hx-swap: 指定如何更新目标元素。...例如，你可以编写一个 async 函数来获取实时天气数据，并将其动态渲染成一个 HTML 表格，整个过程都在 Python 中完成。...通过 htmx，用户可以添加、编辑和删除待办事项，所有操作都会实时反映在页面上，无需刷新整个页面。

4782 1

htmx，它到底是框架还是库？

比如，一个使用了CSV解析库的JavaScript服务可以相对容易地更换另一个CSV解析库；但如果是使用了NextJS这样的框架，服务可能就会在整个生命周期中依赖于NextJS，因为大量代码都是基于与NextJS...当你在项目中使用htmx时，你会在HTML中包含htmx的属性（比如hx-post，hx-target），编写以htmx格式化数据（带有特定请求头）来调用的端点，并从这些端点返回htmx期望的格式化数据...但当你使用htmx时，你不会遇到这个问题，因为htmx是一个零依赖的、客户端加载的JavaScript文件，它不会与你的服务器依赖的任何构建过程或依赖链发生冲突。...另一个重要优势是，浏览器直接渲染HTML，因此使用htmx时不需要任何编译器或转译器。虽然许多htmx用户喜欢用JSX来渲染API响应，但htmx与传统的模板引擎兼容性良好，可以轻松移植到任何语言。...无论何时编写你的htmx应用程序，htmx表单的行为始终与普通HTML表单的定义方式大致相同：使用标签。

7081 0

聊聊 HTMX 吧

intercoolerjs这个玩意就已经可以实现类似 htmx 的效果，就是不需要绑定任何事件，直接就进行标签请求一个地址，将返回的信息直接渲染到对应的页面上，这些功能是他已经存在的，关于intercoolerjs...DOCTYPE html> html> 测试 htmx 的用法 hx-target...http://jsonplaceholder.typicode.com/posts/1/comments" hx-trigger="keyup changed delay:500ms, search" hx-target...http://jsonplaceholder.typicode.com/posts/1/comments" hx-trigger="keyup changed delay:500ms, search" hx-target

7151 0

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

这两个阻塞发生在HTML页面初次解析时，它们对性能的影响较大，原因是： document对象绑定了一个事件：DOMContentLoaded。这个事件会在DOM解析完成之后触发。...也就是说，DOM解析工作不完成，用户与页面的很多（并不是所有）事件交互就无法进行。这时候浏览器的忙指示（那个页面上方的烦人的旋转的圆圈）不会消失。 DOMContentLoaded什么时候触发？...注：现代浏览器会并发的预加载CSS、JS、IMG（例如：当 HTML 解析器（HTML Parser）被脚本阻塞时，解析器虽然会停止构建 DOM，但仍会识别该脚本后面的资源，并进行预加载）。...js线程与资源进行加载的线程并不互斥，不会互斥意味着：资源的加载可以和UI渲染、重排，事件响应，或者JavaScript代码的执行的并发进行。...即：整个 document 解析完毕且 defer-script 也加载完成之后（这两件事情的顺序无关），会执行所有由 defer-script 加载的 JavaScript 代码，然后触发 DOMContentLoaded

2.9K2 0

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

也就是说，DOM解析工作不完成，用户与页面的很多（并不是所有）事件交互就无法进行。这时候浏览器的忙指示（那个页面上方的烦人的旋转的圆圈）不会消失。 DOMContentLoaded什么时候触发？...注：现代浏览器会并发的预加载CSS、JS、IMG（例如：当 HTML 解析器（HTML Parser）被脚本阻塞时，解析器虽然会停止构建 DOM，但仍会识别该脚本后面的资源，并进行预加载）。...js线程与资源进行加载的线程并不互斥，不会互斥意味着：资源的加载可以和UI渲染、重排，事件响应，或者JavaScript代码的执行的并发进行。...即：整个 document 解析完毕且 defer-script 也加载完成之后（这两件事情的顺序无关），会执行所有由 defer-script 加载的 JavaScript 代码，然后触发 DOMContentLoaded...complete：图片显示出来以后为true 转载请注明来源：再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载文有不妥之处，请告知，谢谢！

5.7K15 0

使用纯Python构建Web应用

构建页面整个页面比较简单，核心是一个输入新待办项的表单和一个待办项列表。...hx_trigger="load"), ], ], ] ) 待办项列表由 id 为 todo-list 的 div 元素渲染，当页面加载完成后...delete"], ] for id, todo in todos.items() ] ] ) 页面加载...、添加新待办项，以及待办项列表中的删除按钮都会触发重新渲染待办项列表，于是我封装了一个 render_todos 函数，用于渲染待办项列表的 HTML 片段。...与常规的 restful 接口不同的是，这里的接口都返回 HTML 片段，而不是 JSON 数据。

6623 0

用Rust搭建React Server Components 的Web服务器

同时函数签名定义为async fn 表示这是一个异步函数，它可以在执行期间挂起而不会阻塞整个线程。我们还是熟悉的配方，在浏览器中访问对应的页面地址。...我们可以使用Maud[5] crate，来重新处理上面的组件。下面，我们做一次简单的改造。首先，我们引入了一个新的依赖项。...将在页面加载后立即被替换 div hx-trigger="load" hx-get="/components/counter" { p { "总数为: 正在加载中..." } // 这个div将在页面加载后立即被替换 { (suspense("/components/counter",html!...{"总数为: 正在加载中...."}))} } } 在页面加载过程中，我们会看到页面中有一瞬间显示的是，Suspence的内容待做的部分上面的内容，我们利用axum和maud或者rscx

9143 0

Htmx意外走红，我们从React“退回去”后：代码行数减少 67%，JS 依赖项从 255 下降到 9

但是如果没有 Javascript，我们必须在每次操作时重新加载页面。现在，有一个新的库出现了，摒弃了定制化的方法，这就是 htmx。...框架不满的浪潮，“这些框架非常复杂，并且经常将 Django 变成一个愚蠢的 JSON 生产者”，而 htmx 与开箱即用的 Django 配合得更好，因为它通过 html 与服务器交互，而 Django...首次加载交互时间缩短了 50% 至 60%（由 2 到 6 秒，缩短至 1 到 2 秒） 8. 使用 htmx 时可以配合更大的数据集，超越 React 的处理极限 9. ...（这里的「全栈」，代表这位开发者能够轻松接手前端和后端工作，因此能够在整个「栈」上独立开发功能。）而在移植至 htmx 之后，整个团队全都成了“全栈”开发人员。...另一个得到简化的元素是物理应用程序的结构与构建管道。因为不再涉及手工编写 JS，而且整个应用程序都基于服务器，因此不再对 JS 压缩器、捆绑器和转译器做（即时）要求。

1.4K1 0

前端开发的未来：回归简约，还是拥抱复杂？

每当用户与应用程序交互时，服务器都会发送一整页新的内容，浏览器需要重新加载整个页面。这种频繁的页面刷新不仅拖慢了速度，还导致了不流畅的用户体验。...前端与后端的分离随着技术的发展，前端和后端开发开始分离。前端开发者专注于用户界面，使用HTML、CSS和JavaScript，并与API和服务器交互。...安全问题：需要保护页面上的关键数据，处理大量的个人信息。重新思考前端开发的必要性随着技术的进步和市场需求的变化，前端开发的角色正在发生变化。...借助于Hydration和Resumability方法，服务器现在只需渲染界面的修改部分，而无需重新加载整个页面。...优化的数据传输：只交换HTML标记，所有的“请求-响应”逻辑对用户是透明的。减少前端复杂度：无需传递大量JSON数据来恢复SPA状态，只需传递一个准备好的模板。

4291 0

2024 年让我想疯狂学习的几个框架。。

HTMX 利用了 HATEOAS（Hypermedia as the Engine of Application State）的概念，使开发人员可以直接从 HTML 访问浏览器功能，而不是使用 JavaScript...包含值以及 getter 和 setter 函数，允许框架观察和更新 DOM 中所需的确切位置的变化，而 React 则重新渲染整个组件。 Solid.js 不仅使用 JSX，还对其进行了增强。...在 Astro 的上下文中，岛屿是页面上的一切交互式 UI 组件，从静态内容的海洋中脱颖而出。页面可以有任意数量的岛屿，因为它们彼此独立运行，但它们也可以共享状态并相互通信，非常的好用。...它是一个非常简单的框架，框架里有一个 reactive 属性，你只需要声明它并在 HTML 模板中使用它。...它既可以提高整体速度，又可以降低带宽到绝对最低，从而实现几乎即时的加载。结论我们提到的所有框架和库之间最大的共同点是熟悉度。

6911 0

我们为什么要重新思考服务器端渲染？

三、HTMX：让服务器“说人话” HTML这时候，HTMX 出现了。HTMX 是什么？一句话：让浏览器接受 HTML 响应并直接替换 DOM 元素，不再需要前端框架做 UI 拼装。...page=2，直接返回渲染好的页面片段表单提交提交 JSON，前端处理结果显示提交表单返回一个 success 弹窗 HTML 片段权限控制前端拿权限字段，判断显示服务器按权限返回对应按钮组弹窗加载前端组件加载...特别适合做以下这些事情：本地跑一个 Flask + HTMX 项目，快速构建原型页面对比 Laravel Blade + HTMX 渲染体验测试后端返回 HTML 的渲染效率 vs JSON...方案做 HTML + JSON 双通道接口的调试对比安装后只需几步即可启动一个后端服务，HTMX 示例项目跑起来只要几分钟。...现在的浏览器支持局部 DOM 替换，性能远超十年前网络条件好了，响应 HTML 的体积根本不是问题业务迭代节奏更快，后端维护渲染逻辑能更敏捷 HTMX 没有前端构建、没有 NPM 依赖、没有

3183 0

前端新玩具，AHA技术栈是个啥？

AHA技术栈的创新 AHA技术栈引入了一些库来简化HTTP连接的管理，使得用户操作能够触发服务器端的动作，从而无需重新加载整个页面即可更新页面的部分内容。...AHA技术栈的实现客户端交互：通过库来处理页面加载后的交互。比如用户点击链接，服务器返回HTML数据，然后动态地将这些数据添加到页面上。...Web服务器：基本的Web服务器，负责处理HTTP响应，与数据库通信（如果需要），返回完整的HTML页面或HTML片段，支持服务端渲染。...AHA技术栈与传统SPA的不同在传统的单页应用（SPA）中，页面初始时不包含HTML主体，而是通过JavaScript获取数据并构建页面。...而AHA技术栈更多地依赖服务器，点击链接时，从服务器加载新页面，没有复杂的客户端JavaScript应用决定页面内容。 AHA技术栈的优势无需与框架作斗争来实现基本的Web功能。

3411 0

为什么现代 JavaScript 开发者正在远离回调与框架？

从回调到 Promise 再到 async/await，这一演进体现了开发者对简洁性与可维护性的追求。三、框架盛世与“前端疲劳”如果说回调地狱是语法层面的困境，那么框架疲劳则是架构层面的困境。...四、“少即是多”：新兴轻量化方案4.1 HTMX：用 HTML 做更多事HTMX 让你通过在 HTML 标签中添加属性，就能实现动态交互。无需复杂的前端逻辑，直接利用后端返回的片段更新页面。...页面首次加载几乎零 JS，让性能更上一层楼。4.3 Marko：流式渲染Marko 强调流式渲染（streaming），让前后端配合更加紧密，适合电商等对性能敏感的场景。...五、趋势背后的哲学：简洁、可维护、长期主义无论是从回调到 async/await，还是从大型框架到 HTMX/Qwik/Marko，其实都在指向同一个目标：简洁与可维护性。...选择轻量化方案 —— 不必为小项目上大框架，HTMX/Qwik/Marko 提供了替代路径。优化本地开发环境 —— 不再依赖繁琐的配置，转而使用像 ServBay 这样的轻量级工具。

2801 0

2024 年值得关注的 JavaScript 最前沿趋势，走起！

其它工具 htmx htmx：简化交互它的原理很简单：从任何用户事件发出 AJAX 请求。让服务器生成代表该请求的新应用程序状态的 html。在响应中发送该 html。...也就是倒回到服务器渲染 Html，不得不说历史就是轮回。...htmx 风潮已经袭来，人们开始强调一种“傻瓜客户端”方法，即由服务器生成 html 本体并发送至客户端，意味着 UI 事件会被发送至服务器进行处理。...x-show="open" @click.away="open = false" > Dropdown Body 这段代码，alpine.js会在页面加载完成之后...Qwik Qwik 是一个全新的 Web 框架，可以为任何规模或复杂程度的 Web 应用程序提供即时加载。

9301 0

实时语音克隆：5 秒内生成任意文本的语音 | 开源日报 No.84

bigskysoftware/htmx[3] Stars: 14.3k License: BSD-2-Clause picture htmx 是一个为 HTML 提供高级功能的工具。...它允许您直接在 HTML 中使用属性来访问 AJAX、CSS 过渡效果、WebSockets 和服务器发送事件，以便利用超文本的简单性和强大性构建现代用户界面。...htmx 体积小巧 (压缩后约 14k)、无需任何依赖、可扩展且与 IE11 兼容。...核心优势：可通过点击或提交事件触发 HTTP 请求支持多种请求方法，不仅限于 GET 和 POST 能够部分更新页面而非整个屏幕关键特性：使用简单：只需要在标签中添加几个属性即可实现各种功能。...EKS 集群和节点组配置身份提供者、网络连接等提供了一系列文档以及参考架构示例核心优势和关键特点如下：可以使用各种类型的节点组：EKS 托管节点组、自管理节点组、Fargate 配置文件支持创建与

7813 0

2023前端技术盘点与2024技术展望

Htmx 意外走红：重新回到 ASP 时代？在前后端分离和单页面应用（SPA）已经形成大局的 2023 年，却有一款基于动态服务器页面（ASP）思想的框架 htmx 意外走红。...\1) Htmx 是什么 htmx 是一款基于 ASP 思想的前端框架，也可以理解成增强型的 HTML。...它允许开发者通过增强 HTML 的特写属性来实现页面的实时交互和动态更新，而不是编写大量的 JavaScript 代码，所以因其小巧的文件体积和能够与现有的服务端框架无缝集成而受到赞誉。...更多具体的介绍可以参考文章 htmx-使HTML更强大 - 知乎，笔者在此不在赘述。...目前主流的支持 SSR 的框架，例如 react、vue 等，从用户请求到页面可交互需要经历以下四个阶段： a. 获取服务端渲染后直出的 HTML b. 浏览器下载页面所需要的所有 JS 资源 c.

2.3K1 0

点击加载更多

HTMX：前端的 1984 时刻？

HTMX简介：无需JavaScript的动态HTML

htmx：后端主导的前端框架是啥样的？

React vs HTMX ，谁更适合你？

回归初心，用纯 Python 构建现代化 Web 应用

htmx，它到底是框架还是库？

聊聊 HTMX 吧

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

使用纯Python构建Web应用

用Rust搭建React Server Components 的Web服务器

Htmx意外走红，我们从React“退回去”后：代码行数减少 67%，JS 依赖项从 255 下降到 9

前端开发的未来：回归简约，还是拥抱复杂？

2024 年让我想疯狂学习的几个框架。。

我们为什么要重新思考服务器端渲染？

前端新玩具，AHA技术栈是个啥？

为什么现代 JavaScript 开发者正在远离回调与框架？

2024 年值得关注的 JavaScript 最前沿趋势，走起！

实时语音克隆：5 秒内生成任意文本的语音 | 开源日报 No.84

2023前端技术盘点与2024技术展望

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐