Flask应用中如何实现动态表格数据提交

在Flask应用开发中，动态表格数据提交是很常见的功能场景，比如订单信息录入、多行表单填写等场景都需要支持用户动态添加、删除表格行，并将所有行的数据一次性提交到后端处理。本文将从前后端协同的角度，完整讲解实现这一功能的全流程。

前端动态表格实现

首先我们需要实现一个可以动态增减行的表格，使用HTML和JavaScript完成基础结构搭建。

<table id="dynamicTable" border="1">
    <thead>
        <tr>
            <th>商品名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <!-- 初始默认一行 -->
        <tr>
            <td><input type="text" name="goods_name" required></td>
            <td><input type="number" name="goods_num" required></td>
            <td><input type="number" step="0.01" name="goods_price" required></td>
            <td><button type="button" onclick="removeRow(this)">删除</button></td>
        </tr>
    </tbody>
</table>
<button type="button" onclick="addRow()">添加行</button>
<button type="button" onclick="submitData()">提交数据</button>

<script>
// 添加新行
function addRow() {
    const tbody = document.querySelector('#dynamicTable tbody');
    const newRow = document.createElement('tr');
    newRow.innerHTML = `
        <td><input type="text" name="goods_name" required></td>
        <td><input type="number" name="goods_num" required></td>
        <td><input type="number" step="0.01" name="goods_price" required></td>
        <td><button type="button" onclick="removeRow(this)">删除</button></td>
    `;
    tbody.appendChild(newRow);
}

// 删除行
function removeRow(btn) {
    const row = btn.parentNode.parentNode;
    // 至少保留一行
    if (document.querySelectorAll('#dynamicTable tbody tr').length > 1) {
        row.remove();
    } else {
        alert('至少保留一行数据');
    }
}
</script>

前端数据收集与提交

动态表格的数据需要统一收集后发送给后端，这里我们使用FormData来组织数据，方便后端接收。

// 提交数据到Flask后端
function submitData() {
    const formData = new FormData();
    const rows = document.querySelectorAll('#dynamicTable tbody tr');
    // 遍历每一行收集数据
    rows.forEach((row, index) => {
        const goodsName = row.querySelector('input[name="goods_name"]').value;
        const goodsNum = row.querySelector('input[name="goods_num"]').value;
        const goodsPrice = row.querySelector('input[name="goods_price"]').value;
        // 按索引拼接参数名，方便后端解析
        formData.append(`goods[${index}][name]`, goodsName);
        formData.append(`goods[${index}][num]`, goodsNum);
        formData.append(`goods[${index}][price]`, goodsPrice);
    });
    // 发送POST请求
    fetch('/submit_goods', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.code === 0) {
            alert('提交成功');
        } else {
            alert('提交失败：' + data.msg);
        }
    })
    .catch(error => {
        console.error('提交出错：', error);
        alert('提交过程中发生错误');
    });
}

Flask后端接收处理

后端需要编写路由接收前端提交的数据，这里我们使用request.form来获取表单参数，同时做基础的校验。

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/submit_goods', methods=['POST'])
def submit_goods():
    try:
        # 获取所有goods开头的参数，解析索引
        goods_list = []
        # 遍历所有参数，提取goods相关的数据
        for key in request.form:
            if key.startswith('goods['):
                # 解析索引和字段名，比如goods[0][name] -> 索引0，字段name
                import re
                match = re.match(r'goods[(d+)][(w+)]', key)
                if match:
                    index = int(match.group(1))
                    field = match.group(2)
                    value = request.form.get(key)
                    # 初始化对应索引的字典
                    if index >= len(goods_list):
                        goods_list.append({})
                    goods_list[index][field] = value
        # 基础校验
        if not goods_list:
            return jsonify({'code': 1, 'msg': '未提交任何商品数据'})
        for item in goods_list:
            if not item.get('name'):
                return jsonify({'code': 1, 'msg': '商品名称不能为空'})
            if not item.get('num') or int(item.get('num', 0)) <= 0:
                return jsonify({'code': 1, 'msg': '商品数量必须为正数'})
            if not item.get('price') or float(item.get('price', 0)) <= 0:
                return jsonify({'code': 1, 'msg': '商品单价必须为正数'})
        # 这里可以写数据入库的逻辑，比如保存到数据库
        print('接收到的商品数据：', goods_list)
        return jsonify({'code': 0, 'msg': '提交成功', 'data': goods_list})
    except Exception as e:
        print('处理出错：', e)
        return jsonify({'code': 1, 'msg': '服务器处理出错'})

if __name__ == '__main__':
    app.run(debug=True, host='127.0.0.1', port=5000)

常见问题与优化

在实际使用中，还可以做以下优化：

• 前端可以添加输入校验，比如数量、单价必须为正数，避免无效数据提交
• 后端可以增加参数过滤，防止恶意提交无关参数
• 如果数据量较大，可以考虑使用JSON格式提交，前端将收集的数据转为JSON字符串，后端通过request.get_json()获取
• 可以添加CSRF防护，避免跨站请求伪造攻击

以上就是Flask应用中实现动态表格数据提交的完整流程，前后端代码结合即可实现完整功能，开发者可以根据自身业务需求调整字段和校验逻辑。

Flask动态表格数据提交JavaScript修改时间：2026-07-20 08:00:12