如何从HTML表格主体提取数据传递至Flask？jQuery动态插入记录后无法获取表格数据

前端数据提取与传输逻辑 #

• 先给目标表格设置唯一固定标识，比如<table id="editable-record-table">，避免jQuery选择器匹配到页面其他同结构表格
• 绑定提交按钮的触发事件，遍历表格<tbody>下的所有数据行，逐行提取单元格内容，整合成结构化对象数组：

// 绑定提交按钮点击事件
$('.submit-all-records').on('click', () => {
  const recordList = [];
  // 跳过表头，逐行遍历有效数据
  $('#editable-record-table tbody tr').each((index, elem) => {
    // 按实际列顺序提取内容，若单元格包含输入控件需替换为对应元素的.val()取值
    const rowContent = {
      item_name: $(elem).find('td').eq(0).text().trim(),
      item_quantity: $(elem).find('td').eq(1).text().trim(),
      item_spec: $(elem).find('td').eq(2).text().trim()
    }
    // 过滤全空的无效行，避免提交脏数据
    if(rowContent.item_name) recordList.push(rowContent)
  })

  // 以JSON格式发起POST请求到Flask后端
  $.ajax({
    url: '/save_table_records',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(recordList),
    success: (resp) => {
      console.log('请求返回结果：', resp)
    }
  })
})

Flask后端接收处理逻辑 #

• 对应前端请求配置专属路由，直接解析传入的JSON结构即可，无需适配传统表单序列化格式：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/save_table_records', methods=['POST'])
def save_records():
    # 直接读取前端传入的结构化数组
    table_records = request.get_json()
    # 后续可对接数据库存储、逻辑校验等业务流程
    print("接收到的前端表格记录：", table_records)
    return jsonify({"code": 200, "msg": "success"})

高频踩坑提示 #

• 动态插入的行如果包含可编辑输入框、下拉选择组件，不要用.text()取值，需定位到对应表单元素后用.val()获取用户实际输入的内容，否则无法拿到修改后的值
• 不要省略contentType: 'application/json'配置，否则Flask端request.get_json()会解析失败，拿到None值
• 前端如果通过跨端口方式调用Flask接口，需要在Flask端配置CORS跨域允许规则，否则请求会被浏览器同源策略拦截

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