Flask表单提交时如何将选中值传入form action路径

我有一个用于选择数据并跳转到user_data页面的表单，选择日期后会跳转至对应页面。目前我可以通过Python的request.form['Period']获取选中的数据，但表单的<form action = "/user_data/{{period}}" method="POST">里的period变量是空的，导致跳转时出现“Not Found”错误。请问有没有办法把选中的日期值传入表单的action路径中？

表单代码如下：

<form action = "/user_data/{{period}}" method="POST">
    <label for = "Period" id = "Period">Period</label>
    <input list="User_Listing_Period" id ="User_Lst_Period" name = "Period">
        <datalist id = "User_data_Period">
            {% for row in user_dat_filter %}
            <option name = "User_Dat_Period" value = "{{row[0]}}"></option>
            {% endfor %}
        </datalist>

    <div class="submit">
        <label for = "Submit" id = "Submit"></label>
        <button type="submit">Submit</button>
    </div>
</form>

方法1：用JavaScript动态修改表单action #

因为表单渲染时period还没被用户选中，所以可以通过JavaScript在用户选择日期后，动态把选中值拼接到action路径里：

修改表单并添加JS逻辑：

<form id="periodForm" action="/user_data/" method="POST">
    <label for="Period" id="Period">Period</label>
    <input list="User_Listing_Period" id="User_Lst_Period" name="Period" onchange="updateAction()">
    <datalist id="User_data_Period">
        {% for row in user_dat_filter %}
        <option value="{{row[0]}}"></option>
        {% endfor %}
    </datalist>

    <div class="submit">
        <button type="submit">Submit</button>
    </div>
</form>

<script>
function updateAction() {
    const form = document.getElementById('periodForm');
    const selectedPeriod = document.getElementById('User_Lst_Period').value;
    // 将选中的时间段拼接到action路径末尾
    form.action = `/user_data/${selectedPeriod}`;
}
</script>

用户选择日期后，表单的action会自动更新为带选中值的路径，提交时就不会出现空路径的问题。

方法2：后端直接读取POST参数，再处理跳转 #

既然你已经能通过request.form['Period']拿到选中值，完全可以把表单action设为固定的/user_data，然后在后端路由里获取参数后再跳转到对应页面：

修改表单action：

<form action="/user_data" method="POST">
    <!-- 其他表单内容保持不变 -->
</form>

后端Python代码示例（以Flask为例）：

@app.route('/user_data', methods=['POST'])
def handle_user_data():
    period = request.form.get('Period')
    if not period:
        return "请选择一个时间段"
    # 跳转到带period参数的页面，或者直接在这里处理数据
    return redirect(f'/user_data/{period}')

# 处理带period的页面路由
@app.route('/user_data/<period>')
def user_data_page(period):
    # 根据period获取对应数据并渲染页面
    return render_template('user_data.html', period=period)

这种方式不需要前端写JS，只需调整后端逻辑即可。

方法3：改用GET方式提交表单 #

如果允许用GET请求，可以把表单method改成GET，这样选中的period会作为URL参数传递，后端直接从request.args读取：

修改表单：

<form action="/user_data" method="GET">
    <!-- 其他表单内容保持不变 -->
</form>

后端路由示例：

@app.route('/user_data', methods=['GET'])
def user_data_page():
    period = request.args.get('Period')
    if not period:
        return "请选择时间段"
    # 根据period处理数据并渲染页面
    return render_template('user_data.html', period=period)

这种方式的好处是URL会包含参数，用户可以收藏或分享链接，但注意GET参数会暴露在URL中，不适合传递敏感数据。

内容的提问来源于stack exchange，提问作者Jim Macaulay