如何将HTML表单生成的数组值传递至Python Flask框架

嘿，刚接触Flask遇到这种问题太正常了！核心问题你已经摸到了：Flask处理表单数据只认元素的name属性，而且隐藏字段的内容要存在value里，不是innerHTML——这就是之前方法失效的原因。下面给你两种靠谱的解决方案，根据你的场景选就行：

方案1：把数组转成JSON字符串传递（推荐用于复杂数组） #

这种方法适合传递任意结构的数组（甚至嵌套数组），步骤很简单：

1. 修改HTML表单，给隐藏字段加name属性 #

<form method="POST" action="/submit">
  <!-- 这里放你原有的其他表单元素 -->
  <!-- 关键：给隐藏字段加上name，保留id方便JS操作 -->
  <input type="hidden" id="Result" name="result_data">
  <button type="submit">提交表单</button>
</form>

2. 用JavaScript把数组转成JSON，赋值给隐藏字段的value #

之前你用的innerHTML对输入框没用，要改写成给value赋值，而且把数组转成JSON字符串（不然数组直接转成字符串会变成"1,2,3"这种，后端解析麻烦）：

// 假设e是你生成的数组，比如let e = ["苹果", "香蕉", "橙子"];
document.getElementById("Result").value = JSON.stringify(e);

3. Flask后端解析JSON字符串成Python列表 #

后端拿到JSON字符串后，用json.loads()转成Python能直接用的列表：

from flask import Flask, request
import json

app = Flask(__name__)

@app.route('/submit', methods=['POST'])
def handle_submit():
    # 通过name属性获取隐藏字段的值
    result_json = request.form.get('result_data')
    # 解析成Python列表
    result_array = json.loads(result_json)
    
    # 现在你就可以操作这个数组啦，比如打印或者存数据库
    print("收到的数组：", result_array)
    return f"成功接收数组：{result_array}"

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

方案2：用多个同名隐藏字段传递（适合简单的一维数组） #

如果你的数组是简单的一维值，也可以动态创建多个同名的隐藏字段，Flask会自动把它们收集成列表：

1. 动态创建隐藏字段（JS部分） #

let e = [10, 20, 30];
const form = document.querySelector('form');

// 循环数组，给每个元素创建一个隐藏字段
e.forEach(item => {
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    // 关键：name用统一的名称，后面加[]让Flask识别为列表
    hiddenInput.name = 'result_items[]';
    hiddenInput.value = item;
    form.appendChild(hiddenInput);
});

2. Flask后端直接获取列表 #

不用解析JSON，直接用getlist()方法获取所有同名字段的值：

@app.route('/submit', methods=['POST'])
def handle_submit():
    # 直接获取列表，得到的是字符串类型，需要的话可以转成数字
    result_array = request.form.getlist('result_items[]')
    result_array = [int(num) for num in result_array]
    
    print("收到的数组：", result_array)
    return f"成功接收数组：{result_array}"

为什么之前的方法不行？ #

再帮你理清楚坑点：

• 表单提交时，只会发送带有name属性的元素的value值，id只是给JS/DOM用的，Flask根本看不到。
• 隐藏字段是<input>元素，它的内容存在value里，innerHTML是给容器类元素（比如<div>）用的，对<input>完全无效。

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