如何携带csrf token将表格数据以数组形式POST提交到Django

问题核心原因 #

• 表格内所有行的输入字段name重复，原生表单提交默认只会保留最后一行同name字段的值
• 你写的表格转数组逻辑没有绑定到表单提交事件，数据根本没有发送到后端
• Django后端没有对应接收明细数组的处理逻辑

实现方案 #

一、前端修改 #

删掉你原来那段未绑定提交事件的表格转数组代码，新增如下表单提交拦截逻辑：

// 拦截表单提交事件
$('form').submit(function(e) {
    // 阻止默认表单提交
    e.preventDefault();
    // 组装明细数组
    let details = [];
    // 遍历表格行，跳过最后一行合计行
    $('#bill tbody tr:not(:last)').each(function() {
        let itemName = $(this).find('.selectitem').val();
        let qty = $(this).find('.qty').val();
        let price = $(this).find('.price').val();
        let amt = $(this).find('.amt').val();
        // 只保留有选择商品的有效行
        if(itemName && qty && price) {
            details.push({
                item_name: itemName,
                quantity: qty,
                price: price,
                amount: amt
            });
        }
    });
    // 组装全部提交数据
    let postData = {
        csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val(),
        billno: $('input[name="billno"]').val(),
        tableno: $('input[name="tableno"]').val(),
        billname: $('input[name="billname"]').val(),
        total: $('input[name="total"]').val(),
        details: details
    };
    // 发送POST请求
    $.post(window.location.href, postData, function(res) {
        // 提交成功后的自定义处理逻辑，比如跳转、提示
        alert('账单提交成功');
        window.location.href = '/bill/list'; // 替换为你自己的业务跳转地址
    });
});

二、Django后端修改 #

import json
from django.http import JsonResponse

def bill(request):
    context = {}
    if request.method == "POST":
        # 接收普通字段
        billno = request.POST.get('billno')
        tableno = request.POST.get('tableno')
        billname = request.POST.get('billname')
        total = request.POST.get('total')
        # 接收明细数组
        details = request.POST.getlist('details[]')
        
        # 遍历明细处理逻辑示例
        for item in details:
            item = json.loads(item)
            item_name = item['item_name']
            qty = item['quantity']
            price = item['price']
            amount = item['amount']
            # 这里写入你保存明细到数据库的逻辑
            # 示例：BillDetail.objects.create(billno=billno, item_name=item_name, ...)
        
        # 账单主表保存逻辑略
        # 返回成功响应
        return JsonResponse({'status': 'success'})
    return render(request, 'abc.html', context)

可选原生表单提交方案（无需AJAX） #

如果你不想用AJAX，可以直接修改所有表格内输入字段的name属性，加上数组后缀：

• 商品选择框的name改成name="itemname[]"
• 数量输入框改成name="qty[]"
• 价格输入框改成name="price[]"
• 金额输入框改成name="amt[]"
  后端直接按顺序取值即可：

item_names = request.POST.getlist('itemname[]')
qtys = request.POST.getlist('qty[]')
prices = request.POST.getlist('price[]')
amts = request.POST.getlist('amt[]')
for i in range(len(item_names)):
    item_name = item_names[i]
    qty = qtys[i]
    # 后续处理逻辑同上

内容的提问来源于stack exchange，提问作者harish krishna