如何将JavaScript字典数组传递给Flask及解决传递时数组为空的问题

这个问题的核心是前端数据传递格式和后端接收方式不匹配，加上你错误地使用了request.args来获取POST请求体里的数据，导致拿不到数组。下面给你两种可行的解决方案，优先推荐第一种（JSON格式传递），更简洁可靠：

方案一：使用JSON格式传递数据（推荐） #

对于数组对象这种复杂结构，JSON是最适配的传递格式，前端把数据序列化为JSON字符串，后端直接解析即可：

前端JavaScript修改 #

保持你原来的data数组构建逻辑不变，把$.post换成$.ajax，指定contentType为application/json并序列化数据：

{% for department in departments %}
var department_id = "{{ department.id }}"
var cardgroup = $("#cardgroups_{{ department.id }}").val();
var doorgroup = $("#doorgroups_{{ department.id }}").val();
data.push({ department_id: department_id, cardgroup_id: cardgroup, doorgroup_id: doorgroup });
{% endfor %}

// 修改请求部分
$.ajax({
  url: "data/save-office/"+office,
  type: "POST",
  contentType: "application/json", // 告知后端数据格式为JSON
  data: JSON.stringify({data: data}), // 将数组转为JSON字符串
  success: function (response) {
    if (response.error) {
      alert(response.error);
    } else if (response.success) {
      load_table();
    }
  }
});

后端Python修改 #

用request.get_json()直接解析请求体里的JSON数据：

@app.post('/data/save-office/<office>')
def save_office(office):
    # 解析JSON请求体，无数据时返回空字典
    request_data = request.get_json() or {}
    # 获取data数组，默认空数组避免KeyError
    departments = request_data.get('data', [])
    # 此时departments就是前端传递的字典数组，可正常处理
    # 示例：print(departments) 查看数据内容
    # ...你的业务逻辑代码...
    return {"success": True}

方案二：保留表单格式传递（仅作兼容参考） #

如果你坚持用application/x-www-form-urlencoded（$.post默认格式），需要手动从request.form里拼接数组——因为jQuery会把数组对象编码成data[0][department_id]这类格式，无法直接用getlist拿到完整数组：

后端Python修改 #

@app.post('/data/save-office/<office>')
def save_office(office):
    departments = []
    index = 0
    while True:
        # 逐个读取数组中每个对象的字段
        dept_id = request.form.get(f'data[{index}][department_id]')
        if not dept_id:  # 无数据时退出循环
            break
        cardgroup_id = request.form.get(f'data[{index}][cardgroup_id]')
        doorgroup_id = request.form.get(f'data[{index}][doorgroup_id]')
        departments.append({
            "department_id": dept_id,
            "cardgroup_id": cardgroup_id,
            "doorgroup_id": doorgroup_id
        })
        index += 1
    # 此时departments就是目标数组
    # ...你的业务逻辑代码...
    return {"success": True}

为什么原来的代码拿不到数据？ #

1. request.args使用错误：request.args用于获取URL中的查询参数（如?key=value），而POST请求的表单数据存放在请求体中，应该用request.form获取。
2. 复杂结构的表单编码限制：对于嵌套的数组对象，表单格式会将其拆分为多个零散的键值对，无法通过getlist直接拿到完整数组，这也是优先推荐JSON方案的原因。

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