Flask动态表格数据提交问题求助：jQuery新手遇数据异常

错误原因 #

你遇到的{"":"20"}异常，核心问题是动态表格里的所有<input>都没有设置name属性。

在提交逻辑中，代码通过row[this.name] = this.value收集数据，但因为input没有name，this.name的值是空字符串。当同一行的两个input都使用空字符串作为键时，后一个输入值会覆盖前一个，最终就出现了只保留第二个输入值、键为空的异常数据。

解决方案 #

要解决这个问题，需要给每个动态输入框添加明确的name属性，并同步修改添加行的逻辑，最后优化数据收集方式：

1. 修改静态HTML中的输入框 #

给表格里的静态input添加name，分别对应菜品名称和价格：

<tr class="p-2">
    <td><input type="text" name="menu_item"></td>
    <td><input type="text" name="menu_price"></td>
</tr>

2. 更新添加行的JS代码 #

确保动态新增的行里，input也带有对应的name属性：

$("#add_rows").click(function () {
    $("#data_container tbody").append(`<tr><td><input type="text" name="menu_item"></td><td><input type="text" name="menu_price"></td></tr>`);
});

3. 优化提交逻辑 #

修改submitForm函数，让数据结构更清晰，同时可以过滤空行（可选）：

const weburl = "/owner-new-cafe";
document.getElementById('submit-btn').addEventListener('click', function (event) {
    event.preventDefault();
    submitForm();
});

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

    // 收集动态表格数据
    const dynamicData = [];
    $('#dynamic-fields tbody tr').each(function () {
        const row = {};
        // 获取当前行的两个输入框
        const itemInput = $(this).find('input[name="menu_item"]')[0];
        const priceInput = $(this).find('input[name="menu_price"]')[0];
        
        // 可选：过滤掉两个输入都为空的行
        if (itemInput.value.trim() || priceInput.value.trim()) {
            row.menu_item = itemInput.value.trim();
            row.menu_price = priceInput.value.trim();
            dynamicData.push(row);
        }
    });

    // 将动态数据转为JSON字符串，添加到FormData中
    formData.append('dynamicData', JSON.stringify(dynamicData));

    // 发送AJAX请求
    $.ajax({
        url: weburl,
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            console.log("提交成功", response);
            // 这里可以添加成功后的操作，比如清空表格、跳转页面等
        },
        error: function (xhr) {
            console.error("提交失败", xhr.responseText);
        }
    });
}

4. Flask后端处理示例 #

后端可以通过解析JSON字符串获取动态表格数据：

from flask import Flask, request, jsonify
import json

app = Flask(__name__)

@app.route('/owner-new-cafe', methods=['POST'])
def owner_new_cafe():
    # 获取静态表单中的咖啡馆名称
    cafe_name = request.form.get('name')
    
    # 获取动态表格数据并解析
    dynamic_data_str = request.form.get('dynamicData')
    dynamic_data = []
    if dynamic_data_str:
        try:
            dynamic_data = json.loads(dynamic_data_str)
            # 这里可以将数据存入数据库，比如：
            # for item in dynamic_data:
            #     db.session.add(MenuItem(name=item['menu_item'], price=item['menu_price']))
            # db.session.commit()
        except json.JSONDecodeError:
            return jsonify({"status": "error", "message": "无效的动态数据格式"})
    
    return jsonify({"status": "success", "cafe_name": cafe_name, "menu_items": dynamic_data})

if __name__ == '__main__':
    app.run(debug=True)

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