使用HTMX的hx-get无法获取表单数据，值始终为None的问题

核心问题分析 #

1. 请求方式与参数获取不匹配：HTMX的hx-get发送的是GET请求，你在Flask中用request.form.get()获取的是POST请求的表单数据，自然拿不到值。
2. 选择器与重复ID问题：页面存在重复的id="edit_pizza"元素（HTML中ID必须唯一），同时hx-include使用name选择器不够可靠，建议改用唯一的表单ID选择器。

修复后的代码示例 #

前端HTML修改 #

<div class="pizza_list" style="text-align: center;">
    <form action="pizza-process-custom" id="pizza_form" class="pizza_form" name="pizza_form">
        <p>Username: {{username}}</p>
        <label class="labels" for="lineart">Lineart:</label>
        <br>
        <select class="selects" id="lineart" name="lineart" hx-trigger="change, load" hx-get="/outline-image" hx-target="#outline_image">
            <option value="1">Black Outline</option>
            <option value="2">Flat Outline</option>
            <option value="3">Detailed Outline</option>
        </select>
        <div id="outline_image"></div>
        <br>
        <br>
        <label class="labels" for="colour">Colour:</label>
        <br>
        <select class="selects" id="colour" name="colour" hx-trigger="change, load" hx-get="/shading-image" hx-target="#colour_image">
            <option value="1">Flat Colours</option>
            <option value="2">Shading</option>
            <option value="3">Highlights</option>
        </select>
        <div id="colour_image"></div>
        <br>
        <br>
        <div>
            <label class="labels" for="topping">Topping:</label>
            <br>
            <select class="selects" id="topping" name="topping">
                {% for topping in toppings %}
                {% if topping[1] == "Nothing" %}
                <option value="{{topping[0]}}" selected>{{topping[1]}}</option>
                {% else %}
                <option value="{{topping[0]}}">{{topping[1]}}</option>
                {% endif %}
                {% endfor %}
            </select>
        </div>
        <br>
        <br>
        <!-- 删除外部重复的edit_pizza div，保留表单内的唯一实例 -->
        <div id="edit_pizza" class="edit_pizza" hx-get="/custom-image" hx-trigger="every 2s" hx-target="#edit_pizza" hx-include="#pizza_form"></div>
        <input class="sub" type="submit" value="Submit">
    </form>
</div>

注：移除了topping选项值末尾的逗号，简化后续后端处理逻辑。

Flask后端修改 #

@app.route('/custom-image')
def custom_image():
    # GET请求用request.args获取参数
    lineart = request.args.get('lineart')
    colour = request.args.get('colour')
    topping = request.args.get('topping')  # 单个select用get即可，无需getlist
    
    toppings = [topping] if topping else []
    
    print(toppings, lineart, colour)
    pizza_image(1, lineart, colour, None, toppings)
    return render_template(OUTLINE_HTML, image_name="view_pizza")

额外优化建议 #

• 若需使用POST请求，可将hx-get改为hx-post，同时Flask路由添加methods=['POST']参数，此时用request.form.get()获取参数是正确的。
• 将定时触发every 2s改为监听表单内select的change事件，减少无效请求：hx-trigger="change from:#pizza_form select"

内容的提问来源于stack exchange，提问作者Hangry Thang