如何使用Django POST提交HTML表格全部数据并存入数据库

现有代码问题梳理 #

• 模型定义不完整：字段没有放在Scrum模型类下，也没有继承Django的models.Model基类，无法正常映射数据库表
• 视图逻辑错误：将查询集Scrum.objects.all()当做表单实例调用save()方法完全无效，POST判断逻辑request.method == "POST" or "None"永远返回真，逻辑完全错误
• 前端提交无数据：可编辑的td元素不属于表单输入控件，直接提交表单不会携带表格内填写的内容

具体实现步骤 #

1. 修正 models.py 定义 #

from django.db import models

# 所有字段必须放在继承了models.Model的模型类中
class Scrum(models.Model):
    Category = models.CharField(max_length=30)
    TaskName = models.CharField(max_length=70)
    AssignedTo = models.CharField(max_length=70)

修改完成后执行数据库迁移命令生效：
python manage.py makemigrations
python manage.py migrate

2. 调整前端模板 scrum.html #

添加JS逻辑在提交前将表格内容序列化后提交：

<form method="POST" action="." id="scrumForm">
    {% csrf_token %}
    <!-- 隐藏域存放序列化后的表格数据 -->
    <input type="hidden" name="table_content" id="tableContent">
    <table class="example-table multiselectable is-centered" id="table" contenteditable="true">
        <tbody>
            <!-- 共26行3列，对应Category、TaskName、AssignedTo三个字段 -->
            {% for _ in 'x'|rjust:'26' %}
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <input type="submit" name="submit" class="btn btn-outline-primary btn-block" value="Submit">
</form>

<script>
// 监听表单提交事件
document.querySelector('#scrumForm').addEventListener('submit', function(e) {
    // 阻止默认提交
    e.preventDefault();
    const rows = document.querySelectorAll('#table tbody tr');
    const tableData = [];
    rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        // 跳过完全为空的行
        if (cells[0].textContent.trim() || cells[1].textContent.trim() || cells[2].textContent.trim()) {
            tableData.push({
                category: cells[0].textContent.trim(),
                task_name: cells[1].textContent.trim(),
                assigned_to: cells[2].textContent.trim()
            });
        }
    });
    // 把数据转成JSON字符串写入隐藏域
    document.querySelector('#tableContent').value = JSON.stringify(tableData);
    // 提交表单
    this.submit();
});
</script>

3. 重写 views.py 逻辑 #

import json
from django.shortcuts import render
from .models import Scrum

def create(request):
    if request.method == "POST":
        # 读取提交的表格数据
        raw_data = request.POST.get('table_content', '[]')
        table_data = json.loads(raw_data)
        # 批量构造模型实例，一次性入库
        create_list = []
        for item in table_data:
            create_list.append(Scrum(
                Category = item['category'],
                TaskName = item['task_name'],
                AssignedTo = item['assigned_to']
            ))
        Scrum.objects.bulk_create(create_list)
    
    # 提交完成后返回页面，可自行添加回显逻辑
    return render(request, "scrum.html")

内容的提问来源于stack exchange，提问作者gomathi subramanian