Flask应用中动态表格数据的高效提交与处理：前端与后端的最佳实践

<div class="card-body">
    <h1>New Cafe</h1>
    <p class="text-muted">Add Your Cafe</p>

    <form id="my-form" name="cafe" method="post" action="" enctype="multipart/form-data">
        {{ cafe_form.csrf_token }}
        <!-- 静态表单字段示例 -->
        {{ cafe_form.name.label }}
        <div class="input-group mb-3">
            {{ cafe_form.name(class="form-control") }}
        </div>

        <div id="data_container">
            <div id="dynamic-fields">
                <table>
                    <thead>
                    <tr>
                        <th>Menu item</th>
                        <th>Menu item Price in USD $</th>
                    </tr>
                    </thead>
                    <tbody class="p-4">
                    <tr class="p-2">
                        <!-- 初始行，确保有name属性 -->
                        <td><input name="item" type="text" class="form-control"></td>
                        <td><input name="price" type="text" class="form-control"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 将提交按钮放在表单外部，通过JS控制提交，避免默认提交行为干扰 -->
        <!-- 或者，如果放在表单内，确保其type="button"以避免默认提交 -->
        <!-- {{ cafe_form.submit(id="submit-btn", class="btn btn-outline-primary px-4") }} -->
    </form>
    <div class="pt-2 pb-2">
        <button id="submit-btn" class="btn btn-outline-primary px-4">Submit</button>
        <button id="add_rows" class="btn btn-outline-dark">+</button>
    </div>
</div>

// 添加新行
$("#add_rows").click(function () {
    $("#dynamic-fields tbody").append(`
        <tr>
            <td><input class="form-control" name="item" type="text"></td>
            <td><input class="form-control" name="price" type="text"></td>
        </tr>
    `);
});

const weburl = "/owner-new-cafe"; // 替换为你的Flask路由URL

document.getElementById('submit-btn').addEventListener('click', function (event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    submitForm();
});

function submitForm() {
    const formElement = document.getElementById('my-form');
    // 1. 收集静态表单数据
    const formData = new FormData(formElement);

    // 2. 收集动态表格数据
    const dynamicData = [];
    $('#dynamic-fields tbody tr').each(function () {
        const row = {};
        // 使用正确的name属性来获取输入值
        const itemInput = $(this).find('input[name="item"]').val();
        const priceInput = $(this).find('input[name="price"]').val();

        // 仅当行有内容时才添加到动态数据列表
        if (itemInput || priceInput) { 
            row['item'] = itemInput;
            row['price'] = priceInput;
            dynamicData.push(row);
        }
    });

    // 3. 将动态数据作为JSON字符串添加到FormData对象
    // 后端可以通过 'dynamic_items' 键获取这个JSON字符串
    formData.append('dynamic_items', JSON.stringify(dynamicData));

    // 4. 使用jQuery AJAX发送FormData
    $.ajax({
        url: weburl,
        method: 'POST',
        data: formData,
        processData: false, // 告诉jQuery不要处理数据，FormData对象会自行处理
        contentType: false, // 告诉jQuery不要设置Content-Type头部，FormData对象会自行设置multipart/form-data
        success: function (response) {
            console.log('提交成功:', response);
            // 处理Flask应用返回的响应
            // 例如：显示成功消息，重定向等
        },
        error: function (xhr, status, error) {
            console.error('提交失败:', status, error);
            // 处理错误
            // 例如：显示错误消息
        }
    });
}

import json
from flask import request, Blueprint, render_template, redirect, url_for, flash
# ... 其他必要的导入，例如你的Flask-WTF表单类

# 假设你的蓝图名为 private
private = Blueprint('private', __name__) 

@private.route('/<city>/owner-new-cafe', methods=["POST", "GET"])
# 根据你的应用需求，可以添加 @login_required, @confirmed_only, @owner_only 等装饰器
def owner_add_cafe(city):
    # 假设 cafe_form 是你的Flask-WTF表单实例
    # 如果你使用了Flask-WTF，通常会这样验证：
    # if request.method == "POST" and cafe_form.validate_on_submit():
    if request.method == "POST":
        print("接收到POST请求")
        # 1. 获取静态表单数据
        # 使用 request.form.get() 安全地获取字段值，避免KeyError
        cafe_name = request.form.get('name') 
        print(f"咖啡馆名称 (静态字段): {cafe_name}")
        # ... 获取其他静态字段，例如 cafe_form.about.data

        # 2. 获取并解析动态表格数据
        dynamic_items_json = request.form.get('dynamic_items')
        if dynamic_items_json:
            try:
                # 将JSON字符串解析为Python列表或字典
                dynamic_items = json.loads(dynamic_items_json)
                print(f"接收到的动态菜单项: {dynamic_items}")

                # dynamic_items 现在是一个Python列表，每个元素是一个字典，例如：
                # [{'item': 'Pizza', 'price': '20'}, {'item': 'Coffee', 'price': '5'}]

                # 可以在这里进一步处理这些数据，例如验证、保存到数据库
                for item_data in dynamic_items:
                    menu_item = item_data.get('item')
                    item_price = item_data.get('price')
                    print(f"处理菜单项: {menu_item}, 价格: {item_price}")
                    # 示例：将数据保存到数据库
                    # new_menu_item = MenuItem(name=