Flask中Jinja列表创建与接收异常：仅能获取首个元素

问题根源 #

你遇到的问题是因为HTML表单按钮的value属性会被空格截断。Jinja渲染{{infoList}}后，输出的是[1, 2]（带空格），浏览器会把空格后的内容丢弃，实际提交给后端的value值只有[1,，所以后端用getlist拿到的列表只有一个元素，访问索引1自然会触发越界异常。

解决方案 #

这里提供三种可行的解决方法：

方法1：用JSON序列化传递列表

把列表序列化为JSON字符串作为按钮的value，后端再解析成列表：

• 前端Jinja代码：

  {% set infoList = [1,2] %}
  <form method="post">
      <button name="add_to_collection" value="{{ infoList|tojson }}">{{ collection[0] }}</button>
  </form>
  

  （tojson过滤器会把列表转为标准JSON格式，渲染后自动处理引号，避免截断）
• 后端Flask代码：

  import json
  from flask import request
  
  # 接收并解析
  info_str = request.form.get('add_to_collection')
  info_list = json.loads(info_str)
  # 此时info_list就是[1,2]，可正常访问索引0和1
  

方法2：用隐藏字段传递多元素

通过多个隐藏input字段传递列表的每个元素，后端用getlist接收：

• 前端Jinja代码：

  {% set infoList = [1,2] %}
  <form method="post">
      {% for item in infoList %}
          <input type="hidden" name="info_list[]" value="{{ item }}">
      {% endfor %}
      <button name="add_to_collection" type="submit">{{ collection[0] }}</button>
  </form>
  

• 后端Flask代码：

  from flask import request
  
  info_list = request.form.getlist('info_list[]')
  # 如果需要整数类型，转换一下
  info_list = [int(item) for item in info_list]
  

方法3：用分隔符拼接字符串传递

把列表元素用无空格的分隔符（比如逗号）拼接成字符串，后端拆分：

• 前端Jinja代码：

  {% set infoList = [1,2] %}
  <form method="post">
      <button name="add_to_collection" value="{{ infoList|join(',') }}">{{ collection[0] }}</button>
  </form>
  

• 后端Flask代码：

  from flask import request
  
  info_str = request.form.get('add_to_collection')
  info_list = info_str.split(',')
  # 转换为整数
  info_list = [int(item) for item in info_list]
  

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