如何在Flask中获取Jinja模板for循环生成的多个<input>表单值

你当前的代码存在2个核心错误导致无法正常获取全部输入值：

• 所有<input>元素未设置name属性：表单提交的键值对以输入控件的name属性作为键，你未给input设置name属性，且后端尝试获取的scoreGame键没有对应的表单元素
• 循环生成的input元素id重复：HTML规范要求同一页面内id属性唯一，重复id会导致DOM操作、样式匹配异常

1. 修改Jinja模板代码 #

给循环生成的input添加带[]后缀的name属性，同时用循环变量区分id避免重复：

<form id="score" method="POST" action="/div">
    <div class="formInput">
        {% for i in range(2) %}
            <input type="text" class="sFixed" id="scoreFixed{{ i }}" name="scoreFixed[]">
        {% endfor %}
    </div>
    <button type="submit">提交</button>
</form>

name属性加[]是前后端交互的通用约定，用来标识该字段是多值数组，方便后端批量接收

2. 修改Flask后端取值代码 #

使用Flask提供的request.form.getlist()方法接收同name的所有值，返回结果为包含所有输入内容的列表：

@app.route('/div', methods=['POST'])
def div_post():
    # 传入name属性的值作为参数，获取所有对应输入
    score_fixed_list = request.form.getlist('scoreFixed[]')
    # 遍历即可获取每个input的输入值
    for score in score_fixed_list:
        print(score)
    return redirect('/')

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