HTMX 默认以 application/x-www-form-urlencoded 格式提交表单数据，而非 JSON；若后端直接调用 request.json 解析，将因无有效 JSON 体而返回 None 或触发 400 错误，request.data 显示为空字节 b''。
htmx 默认以 `application/x-www-form-urlencoded` 格式提交表单数据，而非 json；若后端直接调用 `request.json` 解析，将因无有效 json 体而返回 `none` 或触发 400 错误，`request.data` 显示为空字节 `b''`。
在使用 HTMX 发起 hx-post 请求时，许多开发者会误以为 hx-vals 属性自动以 JSON 方式发送数据。但事实是：HTMX 默认不发送 JSON 请求体 —— 它将 hx-vals 中的键值对序列化为标准 URL 编码格式（即 key=value&...），并设置请求头 Content-Type: application/x-www-form-urlencoded。这正是导致 Flask/FastAPI 等框架中 request.json 为 None、request.data 为空（b''）的根本原因。
✅ 正确处理方式一：后端适配 URL 编码格式（推荐初学者）
修改 Flask 路由，使用 request.form 或 request.values 获取参数：
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route("/toggle_favourite", methods=["POST"])
def toggle_favourite():
# ✅ 正确：从表单编码中读取
station_id = request.form.get("station_id")
if not station_id:
return jsonify({"error": "station_id required"}), 400
# 业务逻辑：切换收藏状态...
print(f"Toggling favourite for station_id: {station_id}")
return jsonify({"success": True, "station_id": station_id})
? 补充说明：hx-vals="{'station_id': '{{ item[0] }}'}" 中的单引号虽在 HTML 中合法，但更稳妥写法是使用双引号 + Jinja2 转义（避免引号冲突）：
<input hx-post="/toggle_favourite" hx-trigger="click" hx-target="this" hx-swap="none" hx-vals='{"station_id": "{{ item[0] | tojson }}"}'>
✅ 正确处理方式二：启用 HTMX JSON 扩展（推荐进阶场景）
若需真正发送 JSON 请求（例如对接严格要求 Content-Type: application/json 的 API），需显式启用 HTMX 官方 json-enc 扩展：
-
引入扩展脚本（在 htmx.js 后加载）：
<script src="https://unpkg.com/htmx.org@1.9.12"></script><script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/json-enc.js"></script>
-
启用扩展并配置请求头：
<input hx-post="/toggle_favourite" hx-trigger="click" hx-target="this" hx-swap="none" hx-vals='{"station_id": "{{ item[0] | tojson }}"}' hx-headers='{"Content-Type": "application/json"}'> -
后端改为解析 JSON 体（Flask 示例）：
@app.route("/toggle_favourite", methods=["POST"]) def toggle_favourite(): try: data = request.get_json() # ✅ 自动解析 application/json 请求体 station_id = data.get("station_id") if not station_id: return jsonify({"error": "station_id missing in JSON"}), 400 return jsonify({"success": True, "station_id": station_id}) except Exception as e: return jsonify({"error": "Invalid JSON"}), 400
⚠️ 关键注意事项
- hx-vals 不等于 JSON.stringify()：它只是 HTMX 内部用于构造请求载荷的声明式语法，最终格式取决于是否启用 json-enc 及 Content-Type 头。
- Jinja2 输出安全：务必使用 {{ item[0] | tojson }} 过滤器（而非原始 {{ item[0] }}），避免 XSS 和 JSON 格式破坏（如含引号、换行等）。
- 调试技巧：开启 htmx.logAll() 后，检查浏览器控制台中 htmx:configRequest 事件的 detail.headers 和 detail.elt.outerHTML，确认实际发出的 Content-Type 与 hx-vals 解析结果。
- FastAPI 用户注意：若用 FastAPI，对应路由应使用 Request 依赖，并通过 await request.json()（异步）或 request.json()（同步）读取；同样需确保前端发送的是合法 JSON 请求体。
✅ 总结
| 场景 | 前端配置 | 后端读取方式 | 适用性 |
|---|---|---|---|
| 简单表单交互（默认行为） | 无需扩展，hx-vals + 默认头 | request.form.get("key") | ✅ 快速上手，兼容性强 |
| 标准化 API 集成 | 启用 json-enc + hx-headers | request.get_json() / await request.json() | ✅ 类型明确，便于前后端契约管理 |
只要明确 HTMX 的默认编码机制，并按需选择表单解析或 JSON 扩展方案，即可彻底规避 b'' 返回与 400 错误，实现稳定可靠的数据交互。
