Flask如何将前页列表选择值作为URL查询参数实现页面可书签保存

1. 修正后端路由逻辑 #

Flask的@app.route装饰器仅匹配URL的路径部分，查询参数不需要写入路由规则，直接通过request.args对象获取即可。你可以直接使用如下后端代码：

import flask
from flask import request, render_template 

app = flask.Flask(__name__)

@app.route('/')
def home():
    result_list = ['hola','mundo']
    return render_template(
        'index.html',
        data=result_list)

# 路由仅保留路径/area即可，查询参数不需要写入规则
@app.route('/area' , methods=['GET'])
def area():
    # 从GET请求的查询参数中获取选中值
    select = request.args.get('comp_select')
    if not select:
        return "Error: No select field provided. Please specify selection.", 400
    return render_template('area.html', data=select)

if __name__ == '__main__':
    app.run(debug=True)

这里将请求方法改为GET，因为GET请求的参数会直接拼接在URL路径后，支持书签保存；POST请求的参数存放在请求体中，不会出现在URL里，无法满足书签保存的需求。

2. 修改前端表单配置 #

你需要修改index.html中的表单提交方式为GET，这样用户提交选择时，选中值会自动拼接到跳转URL的查询参数中：

<!DOCTYPE html>
<html>
<head>
    <title>选择页面</title>
</head>
<body>
    <!-- 关键配置：提交方法设为GET，提交目标为/area -->
    <form method="GET" action="/area">
        <select name="comp_select">
            {% for option in data %}
            <option value="{{ option }}">{{ option }}</option>
            {% endfor %}
        </select>
        <button type="submit">提交选择</button>
    </form>
</body>
</html>

修改完成后，用户选择值提交后跳转的URL格式为/area?comp_select=hola，直接保存该书签即可在下次访问时直接得到对应选择的结果页面。
如果你希望查询参数的键名为select，只需要把select标签的name属性改为select，后端同步修改为request.args.get('select')即可。

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