如何从JavaScript向Flask传递数组数据？Ajax传值异常求解

核心错误点 #

• 数组序列化配置缺失：jQuery默认序列化数组的格式为contacts[0]、contacts[1]这类带索引的键名，无法被Flask的getlist方法直接识别
• 数据收集逻辑缺失：代码中定义的values数组从未被赋值，始终为空，没有编写读取动态生成输入框内容的逻辑
• 请求触发时机错误：Ajax请求写在全局作用域，页面加载到对应代码行就会直接发送，并非用户填写完数据、点击提交按钮后触发
• 语法与规范问题：代码末尾存在冗余的闭合大括号，动态生成的删除按钮重复使用btn作为id，违反DOM id全局唯一的规范，会导致事件绑定异常
• 后端路由逻辑不全：GET请求分支没有返回页面对应内容，直接访问路由会抛出500错误

修复步骤 #

1. 调整前端HTML结构 #

首先修正按钮id重复问题，给新增、提交按钮设置独立id，动态生成的删除按钮使用class即可：

<!-- 原有按钮调整id，避免和动态元素重复 -->
<button id="addBtn">新增条目</button>
<div id="box"></div>
<button id="submitBtn">提交</button>

2. 修正前端JS逻辑 #

把数据收集、Ajax发送逻辑绑定到提交按钮点击事件上，配置正确的序列化参数：

window.onload = function(){
  const addBtn = document.querySelector("#addBtn");
  const submitBtn = document.querySelector("#submitBtn");
  const box = document.getElementById("box");

  // 绑定新增行事件
  addBtn.onclick = function(){
    const div= document.createElement("div");
    div.innerHTML = generateit();
    box.appendChild(div);
  }

  // 绑定提交事件：点击提交时先收集所有输入值，再发请求
  submitBtn.onclick = function(){
    const values = [];
    // 遍历所有动态生成的行，收集输入框内容
    const rows = box.querySelectorAll("div");
    rows.forEach(row => {
      const party = row.querySelector(".txt").value.trim();
      const region = row.querySelector(".txt1").value.trim();
      const name = row.querySelector(".txt2").value.trim();
      // 可根据业务需要调整存储结构，这里存对象方便后端处理
      values.push({party: party, region: region, name: name});
    });

    // 发送请求，推荐直接传JSON格式处理复杂结构
    $.ajax({
      url:'{{url_for("admin")}}',
      type:'POST',
      contentType: 'application/json',
      data: JSON.stringify({contacts: values}),
      success:function(res){
        console.log("后端返回：", res);
      }
    });
  }
}

// 生成行内容，删除按钮用class不用id，避免重复
function generateit(){
 return `<input type='text' class='txt' placeholder='Enter party name' required>&nbsp
 <input type='text' class='txt1' placeholder='Enter region' required>&nbsp
 <input type='text' class='txt2' placeholder='Enter name' required>&nbsp
 <button class='removeBtn' onclick='removeit(this);'>Remove</button>`;
}

function removeit(btn){
  document.getElementById("box").removeChild(btn.parentNode);
}

3. 修正Flask后端逻辑 #

复杂结构数组直接用JSON解析方式接收，GET请求返回对应页面：

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/admin',methods = ['POST','GET'])
def admin():
    if request.method == "POST":
        # 解析JSON格式的请求数据
        req_data = request.get_json()
        contacts = req_data.get("contacts", [])
        print("接收到的数组：", contacts)
        return str(contacts)
    # GET请求返回渲染的页面
    return render_template("admin.html")

可选的基础类型数组传参方案 #

如果传递的是纯字符串/数字这类基础类型数组，不需要复杂对象结构，可以不用传JSON，给Ajax加traditional: true参数即可：

$.ajax({
  url:'{{url_for("admin")}}',
  type:'POST',
  traditional: true, // 开启传统序列化模式，数组键名不带索引
  data:{contacts: values}, // values为基础类型数组，如['a','b','c']
  success:function(res){}
});

后端对应接收逻辑：

@app.route('/admin',methods = ['POST','GET'])
def admin():
    if request.method == "POST":
        # 开启traditional后直接用键名取列表即可，不需要加[]
        contacts = request.form.getlist("contacts")
        return str(contacts)
    return render_template("admin.html")

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