HTMX 动态加载演示

通过HTML属性实现AJAX、WebSockets等现代浏览器功能

基础AJAX请求

服务器时间
加载中...
点击按钮获取时间
每日一言
加载中...
点击按钮获取名言
用户信息
加载中...
点击按钮获取信息
HTMX 基础
  • hx-get - GET请求
  • hx-post - POST请求
  • hx-target - 目标元素
  • hx-swap - 替换方式
  • hx-indicator - 加载指示器

动态表单提交

提交结果

填写表单并提交,结果将在这里显示。

实时搜索

搜索中...

开始输入以搜索内容

搜索特性
  • 实时搜索
  • 防抖动延迟
  • 加载指示器
  • 动态结果
提示: 尝试搜索 "JavaScript", "CSS", "HTML" 等关键词

无限滚动列表

加载内容中...

无限滚动

滚动到页面底部自动加载更多内容,提供流畅的用户体验。

加载页数: 1
总文章数: 0

实时聊天演示

你好!欢迎体验HTMX聊天演示
刚刚
正在输入...
聊天机器人

这是一个使用HTMX实现的简单聊天界面。发送消息会得到自动回复。

支持的命令:
  • /time - 获取当前时间
  • /help - 显示帮助信息
  • /clear - 清空聊天记录

实时投票系统

你最喜欢的前端框架是什么?
加载投票结果...
投票统计

点击选项进行投票,结果将实时更新。每个用户只能投票一次。

HTMX 主要特性

声明式
  • HTML属性驱动
  • 无需JavaScript代码
  • 直观易懂
  • 渐进增强
功能强大
  • AJAX请求
  • WebSocket支持
  • 服务器发送事件
  • 历史管理
轻量灵活
  • 仅14KB大小
  • 无依赖关系
  • IE11+支持
  • 扩展系统