如何从htmx POST请求中获取hx-params参数？

我用JavaScript生成座位按钮，给每个按钮设置了hx-post、hx-trigger和hx-params属性，hx-params里存座位ID（比如"0-0"或"12-5"）。但在Flask的/select_seat POST接口里获取这个参数时，返回的是None。相关代码如下：

JavaScript代码 #

const seat = document.createElement("button");
seat.innerHTML = `${(c + 1) + (r * 6)} - ${(ic + 1) + (ir * 8)}`;
seat.setAttribute("hx-params", `${(c + 1) + (r * 6)}-${(ic + 1) + (ir * 8)}`);
seat.setAttribute("hx-trigger", 'click');
seat.setAttribute("hx-post", '/select_seat');

Htmx示例代码 #

<button hx-params="1-1" hx-trigger="click" hx-post="/select_seat" class="seat">1 - 1</button>

Flask代码 #

@app.route('/select_seat', methods=['POST'])
def your_route():
    print(request.data)  # Print the raw data received
    
    htmx_data = request.json
    
    if htmx_data:
        hx_params = htmx_data.get('params', {}).get('hx-params', None)
        
        if hx_params:
            print(hx_params)
            return jsonify({'status': 'success'})
    
    return jsonify({'status': 'error'})

核心问题是误用了hx-params属性：hx-params的作用是指定要提交的现有参数列表（比如表单字段），而非存储自定义数据，htmx不会将该属性的值作为请求数据发送。

以下是两种可行的修正方案：

方案1：用hx-vars发送JSON格式的座位ID #

修正后的JavaScript #

const seat = document.createElement("button");
const seatId = `${(c + 1) + (r * 6)}-${(ic + 1) + (ir * 8)}`;
seat.innerHTML = `${(c + 1) + (r * 6)} - ${(ic + 1) + (ir * 8)}`;
// 用hx-vars直接定义要发送的参数
seat.setAttribute("hx-vars", `{"seat_id": "${seatId}"}`);
seat.setAttribute("hx-trigger", 'click');
seat.setAttribute("hx-post", '/select_seat');

修正后的Flask接口 #

from flask import request, jsonify

@app.route('/select_seat', methods=['POST'])
def select_seat():
    seat_id = request.json.get('seat_id')
    if seat_id:
        print(seat_id)
        return jsonify({'status': 'success', 'seat_id': seat_id})
    return jsonify({'status': 'error', 'message': '未获取到座位ID'})

方案2：用表单参数提交座位ID #

修正后的JavaScript #

const seat = document.createElement("button");
const seatId = `${(c + 1) + (r * 6)}-${(ic + 1) + (ir * 8)}`;
seat.innerHTML = `${(c + 1) + (r * 6)} - ${(ic + 1) + (ir * 8)}`;
// 给按钮设置name和value，模拟表单提交
seat.setAttribute("name", "seat_id");
seat.setAttribute("value", seatId);
seat.setAttribute("hx-trigger", 'click');
seat.setAttribute("hx-post", '/select_seat');

修正后的Flask接口 #

from flask import request, jsonify

@app.route('/select_seat', methods=['POST'])
def select_seat():
    seat_id = request.form.get('seat_id')
    if seat_id:
        print(seat_id)
        return jsonify({'status': 'success'})
    return jsonify({'status': 'error'})

内容的提问来源于stack exchange，提问作者Charlie Infi