HTMX POST请求返回b''，Flask后端无法获取参数求助

问题根源分析 #

1. hx-vals语法错误：你写的hx-vals="{'station_id': '158820'}"用了单引号包裹JSON结构，但JSON规范要求键和字符串值必须使用双引号。HTMX无法解析这种格式的hx-vals，导致没有发送任何数据，所以Flask端request.data输出为空的b''。
2. Flask参数获取方式错误：HTMX默认发送的请求Content-Type是application/x-www-form-urlencoded（表单编码格式），而非application/json。直接用request.json.get()会因为request.json为None而抛出异常，触发400错误。

修复方案 #

方案一：使用默认表单编码格式（推荐，无需修改请求头） #

1. 修正HTML中的hx-vals

将hx-vals的单引号替换为双引号，注意外层用单引号避免和HTML属性引号冲突：

<input
  hx-post="/toggle_favourite"
  hx-trigger="click"
  hx-target="this"
  hx-swap="none"
  hx-vals='{"station_id": "{{ item[0] }}"}'
/>

也可以使用HTMX的JavaScript表达式写法（更灵活）：

<input
  hx-post="/toggle_favourite"
  hx-trigger="click"
  hx-target="this"
  hx-swap="none"
  hx-vals='js:{station_id: "{{ item[0] }}"}'
/>

2. 修正Flask路由获取参数的方式

改用request.form来获取表单编码的参数：

from flask import Flask, request

app = Flask(__name__)

@app.route('/toggle_favourite', methods=['POST'])
def toggle_favourite():
    station_id = request.form.get('station_id')
    # 这里编写你的业务逻辑，比如修改收藏状态
    return '', 204  # hx-swap为none，返回空响应即可

方案二：强制发送JSON格式请求 #

如果需要以JSON格式传输数据，需要添加hx-headers指定请求头，并确保hx-vals格式正确：

1. 修改HTML代码

<input
  hx-post="/toggle_favourite"
  hx-trigger="click"
  hx-target="this"
  hx-swap="none"
  hx-vals='{"station_id": "{{ item[0] }}"}'
  hx-headers='{"Content-Type": "application/json"}'
/>

2. 调整Flask路由代码

此时可以安全使用request.json获取数据：

@app.route('/toggle_favourite', methods=['POST'])
def toggle_favourite():
    request_data = request.json
    if not request_data or 'station_id' not in request_data:
        return '缺少station_id参数', 400
    station_id = request_data.get('station_id')
    # 业务逻辑处理
    return '', 204

内容的提问来源于stack exchange，提问作者Hugo Lundqvist