Flask应用中动态表格数据提交的完整教程

<div class="card-body">
    <h1>新咖啡馆</h1>
    <p class="text-muted">添加您的咖啡馆信息</p>

    <form id="my-form" name="cafe" method="post" action="/owner-new-cafe" enctype="multipart/form-data">
        {{ cafe_form.csrf_token }}
        {{ ckeditor.load() }}
        {{ ckeditor.config(name='about') }}
        {{ cafe_form.name.label }}
        <div class="input-group mb-3">
            <span class="input-group-addon"></span>
            {{ cafe_form.name(class="form-control") }}
        </div>

        <div id="dynamic-fields-container">
            <div id="dynamic-fields">
                <table>
                    <thead>
                        <tr>
                            <th>菜单项</th>
                            <th>菜单项价格 (USD $)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 初始行，注意 name 属性 -->
                        <tr>
                            <td><input class="form-control" name="item" type="text" placeholder="例如: 披萨"></td>
                            <td><input class="form-control" name="price" type="text" placeholder="例如: 20"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 提交按钮，注意其ID -->
        <div class="pt-2 pb-2">
            <button id="submit-btn" type="submit" class="btn btn-outline-primary px-4">提交</button>
            <!-- 添加行按钮，设置为 type="button" 防止默认提交 -->
            <button id="add_rows" type="button" class="btn btn-outline-dark">+</button>
        </div>
    </form>
</div>

$(document).ready(function() {
    const weburl = "/owner-new-cafe"; // 定义提交URL

    // 1. 动态添加表格行
    $("#add_rows").click(function() {
        // 每点击一次 '+' 按钮，添加一行到表格
        $("#dynamic-fields-container tbody").append(`
            <tr>
                <td><input class="form-control" name="item" type="text" placeholder="例如: 汉堡"></td>
                <td><input class="form-control" name="price" type="text" placeholder="例如: 15"></td>
            </tr>
        `);
    });

    // 2. 监听表单提交事件
    $('#my-form').on('submit', function(event) {
        event.preventDefault(); // 阻止表单的默认提交行为
        submitForm();
    });

    function submitForm() {
        // a. 收集静态表单数据
        // FormData 对象会自动收集表单中所有带有 name 属性的输入字段
        const formData = new FormData(document.getElementById('my-form'));

        // b. 收集动态表格数据
        const dynamicData = [];
        $('#dynamic-fields-container tbody tr').each(function() {
            const row = {};
            // 遍历当前行中的所有输入字段
            $(this).find('input').each(function() {
                // 将输入字段的 name 作为键，value 作为值
                // 确保动态添加的 input 也有 name 属性
                if (this.name) { // 检查 name 属性是否存在
                    row[this.name] = this.value;
                }
            });
            dynamicData.push(row);
        });

        // c. 将动态数据添加到 FormData 对象中
        // 将 dynamicData 数组转换为 JSON 字符串后添加
        formData.append('dynamicData', JSON.stringify(dynamicData));

        // 调试：查看 FormData 内容 (FormData 不能直接打印，需要迭代)
        // for (let pair of formData.entries()) {
        //     console.log(pair[0]+ ': ' + pair[1]);
        // }

        // d. 使用 AJAX 发送数据到 Flask 应用
        $.ajax({
            url: weburl,
            method: 'POST',
            data: formData,
            processData: false, // 告诉 jQuery 不要处理数据
            contentType: false, // 告诉 jQuery 不要设置 Content-Type 头
            success: function(response) {
                console.log('数据提交成功:', response);
                // 处理 Flask 应用的响应
                alert('咖啡馆信息和菜单已成功提交！');
                // 可以重定向或更新UI
            },
            error: function(xhr, status, error) {
                console.error('数据提交失败:', status, error, xhr.responseText);
                // 处理错误
                alert('提交失败，请重试。');
            }
        });
    }
});

import json
from flask import Blueprint, request, render_template, flash, redirect, url_for
from flask_login import login_required, current_user
# 假设您有 cafe_form 和其他验证装饰器
# from .forms import CafeForm
# from .decorators import confirmed_only, owner_only

# 创建蓝图
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 = CafeForm() # 实例化您的表单

    if request.method == "POST":
        print("收到POST请求！")

        # 1. 获取静态表单数据
        # request.form 是一个 ImmutableMultiDict，包含所有非文件表单字段
        cafe_name = request.form.get('name') # 获取咖啡馆名称
        # 其他静态字段，例如：
        # about_content = request.form.get('about') 

        print(f"咖啡馆名称: {cafe_name}")
        # print(f"关于内容: {about_content}")

        # 2. 获取并解析动态表格数据
        dynamic_data_json = request.form.get('dynamicData')
        if dynamic_data_json:
            try:
                dynamic_menu_items = json.loads(dynamic_data_json)
                print("动态菜单项:")
                for item in dynamic_menu_items:
                    menu_item_name = item.get('item')
                    menu_item_price = item.get('price')
                    print(f"  - 菜单项: {menu_item_name}, 价格: {menu_item_price}")
                    # 在这里可以将这些数据存入数据库
            except json.JSONDecodeError:
                print("错误：无法解析 dynamicData JSON 字符串。")
                return "错误：动态数据格式不正确", 400
        else:
            print("没有收到动态菜单项数据。")

        # 3. 处理文件上传 (如果您的表单包含文件字段)
        # 例如：cafe_logo = request.files.get('logo')

        # 4. 执行业务逻辑，例如保存到数据库
        # if cafe_form.validate_on_submit():
        #     # 保存 cafe_name, about_content, dynamic_menu_items 等到数据库
        #     flash('咖啡馆信息和菜单已成功添加！', 'success')
        #     return redirect(url_for('some_other_route'))

        return "数据已成功接收并处理", 200 # 返回成功响应

    # 如果是 GET 请求，渲染表单
    # return render_template('owner_add_cafe.html', cafe_form=cafe_form, city=city)
    return "请通过POST请求提交数据", 200 # 仅为示例，实际应渲染模板