使用jQuery和Flask处理动态表格数据提交的教程

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

    <!-- 主表单，用于静态数据 -->
    <form id="my-form" name="cafe" method="post" action="" enctype="multipart/form-data">
        <!-- Flask CSRF Token 和其他静态字段 -->
        {{ 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>
        <!-- 其他静态表单字段... -->
    </form>

    <!-- 动态表格部分 -->
    <div id="dynamic-fields-container">
        <h2>菜单项</h2>
        <table>
            <thead>
                <tr>
                    <th>菜单项</th>
                    <th>价格 (USD $)</th>
                </tr>
            </thead>
            <tbody id="menu-items-tbody">
                <!-- 初始行，也需要name属性 -->
                <tr>
                    <td><input class="form-control mb-3" name="item" type="text" placeholder="例如：披萨"></td>
                    <td><input class="form-control mb-3" name="price" type="text" placeholder="例如：20"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="pt-2 pb-2">
        <button id="add_rows" class="btn btn-outline-dark">+</button>
        <button id="submit-btn" class="btn btn-outline-primary px-4">提交所有数据</button>
    </div>
</div>

// 当点击“添加行”按钮时
$("#add_rows").click(function () {
    // 向表格的tbody追加一个新行
    $("#menu-items-tbody").append(`
        <tr>
            <td><input class="form-control mb-3" name="item" type="text" placeholder="例如：披萨"></td>
            <td><input class="form-control mb-3" name="price" type="text" placeholder="例如：20"></td>
        </tr>
    `);
});

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

function submitAllFormData() {
    // 1. 收集静态表单数据 (如果需要，使用FormData)
    // const staticFormData = new FormData(document.getElementById('my-form'));
    // 对于本教程，我们主要关注动态数据，如果静态数据需要一同提交，可以整合到下面的obj中或单独处理。

    // 2. 收集动态表格数据
    let dynamicDataObj = {}; // 用于存储动态表格数据
    let rowIndex = 0; // 用于生成唯一的键，例如 r0, r1, r2

    $("#menu-items-tbody tr").each(function () {
        let rowValues = []; // 存储当前行中所有输入字段的值

        // 遍历当前行中的所有input字段
        $(this).find("input").each(function () {
            // 获取输入值并去除分号，因为我们将使用分号作为分隔符
            const val = this.value.replace(/;/g, "");
            rowValues.push(val);
        });

        // 将当前行的值用分号连接成一个字符串，并作为键值对添加到dynamicDataObj
        // 例如：dynamicDataObj["r0"] = "披萨;20"
        dynamicDataObj[`r${rowIndex}`] = rowValues.join(";");
        rowIndex++;
    });

    // 3. 打印收集到的数据，以便调试
    console.log("将要发送的动态数据:", dynamicDataObj);

    // 4. 发送数据到Flask后端
    const weburl = "/owner-new-cafe"; // 替换为你的Flask后端URL

    // 使用jQuery的$.post方法发送数据
    $.post(weburl, dynamicDataObj, function (response, status) {
        console.log("数据提交状态:", status);
        console.log("后端响应:", response);
        // 根据后端响应处理成功或失败
        if (status === "success") {
            alert("菜单数据提交成功！");
            // 可以重定向或更新UI
        } else {
            alert("菜单数据提交失败，请重试。");
        }
    }).fail(function (xhr, status, error) {
        console.error("AJAX请求失败:", status, error);
        alert("AJAX请求出错，请检查网络或服务器。");
    });

    // 如果需要同时提交静态表单数据，并且不涉及文件上传，
    // 可以将静态数据也收集到 dynamicDataObj 中，或者将 dynamicDataObj 附加到 FormData。
    // 示例：
    // const fullFormData = new FormData(document.getElementById('my-form'));
    // fullFormData.append('dynamic_menu_items', JSON.stringify(dynamicDataObj));
    // $.ajax({
    //     url: weburl,
    //     method: 'POST',
    //     data: fullFormData,
    //     processData: false,
    //     contentType: false,
    //     success: function(response) { ... },
    //     error: function(xhr) { ... }
    // });
}

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

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请求！")
        print("请求表单数据:", request.form)

        # 打印所有接收到的表单项
        for key, value in request.form.items():
            print(f"键: {key}, 值: {value}")

        # 解析动态表格数据
        menu_items_data = []
        for key, value in request.form.items():
            if key.startswith('r'): # 检查键是否以'r'开头，表示是动态菜单项
                parts = value.split(';')
                if len(parts) == 2:
                    item_name = parts[0]
                    item_price = parts[1]
                    menu_items_data.append({'item': item_name, 'price': item_price})
                else:
                    print(f"警告: 无法解析的菜单项数据: {value}")

        print("解析后的菜单项数据:", menu_items_data)

        # 在这里可以将 menu_items_data 存储到数据库
        # 例如：
        # for item in menu_items_data:
        #     new_menu_item = MenuItem(name=item['item'], price=float(item['price']), cafe_id=current_user.cafe.id)
        #     db.session.add(new_menu_item)
        # db.session.commit()
        # flash('菜单项已成功添加！', 'success')

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

    # 如果是GET请求，渲染表单页面
    return render_template('owner_add_cafe.html', city=city) # 假设有这个模板和表单