如何通过Ajax向Django传递多列表并实现数据入库？

前端修正：正确传递数组数据 #

不要用join(',')拼接对象数组（对象转字符串默认输出[object Object]，完全丢失数据），推荐两种可靠的传递方式：

方式1：传递JSON格式（更简洁） #

用JSON.stringify()把整个数组转为JSON字符串，同时告诉后端请求内容是JSON：

selected_items = []; 
for (var i = 0; i < checkBoxes.length; i++) {         
     var selected_obj ={ 
        stock_id: checkBoxes[i].id,
        quantity: row.cells[3].innerHTML
      }
      selected_items.push(selected_obj);
}

console.log(selected_items);
$.ajax({
    type: "POST",
    url: "{% url 'sales-item' %}",
    contentType: "application/json", // 声明请求格式为JSON
    data: JSON.stringify({
        multiple_list: selected_items
    }),
}).done(function(data){
    // 处理回调逻辑
});

方式2：表单编码格式传递 #

直接传递数组，jQuery会自动将其格式化为后端可识别的表单参数：

$.ajax({
    type: "POST",
    url: "{% url 'sales-item' %}",
    data: {
        'multiple_list': selected_items,
        'item_size': selected_items.length
    },
}).done(function(data){...});

后端修正：解析数据并循环处理 #

根据前端的传递方式，对应两种后端处理逻辑：

对应前端方式1：解析JSON数据 #

先把请求体的JSON字符串转为Python列表字典，再循环遍历每条数据：

import json
from django.http import JsonResponse

def sales_item(request):
    if request.method == 'POST':
        # 读取并解析JSON请求体
        request_data = json.loads(request.body)
        out_items = request_data.get('multiple_list', [])
        
        # 循环处理每条数据
        for item in out_items:
            stock_id = item.get('stock_id')
            quantity = item.get('quantity')
            print(f"stock_id: {stock_id}, quantity: {quantity}")
            
            # 插入数据库示例（替换为你的模型操作）
            # StockModel.objects.create(stock_id=stock_id, quantity=quantity)
        
        return JsonResponse({'status': 'success'})

对应前端方式2：解析表单编码数据 #

通过表单参数的索引结构重组数据：

from django.http import JsonResponse

def sales_item(request):
    if request.method == 'POST':
        out_items = []
        item_size = int(request.POST.get('item_size', 0))
        
        # 按索引遍历重组每个对象
        for i in range(item_size):
            stock_id = request.POST.get(f'multiple_list[{i}][stock_id]')
            quantity = request.POST.get(f'multiple_list[{i}][quantity]')
            if stock_id and quantity:
                out_items.append({'stock_id': stock_id, 'quantity': quantity})
        
        # 循环处理并插入数据库
        for item in out_items:
            print(f"stock_id: {item['stock_id']}, quantity: {item['quantity']}")
            # 数据库插入操作
        
        return JsonResponse({'status': 'success'})

错误原因说明 #

• 最初用selected_items.join(',')时，JavaScript会把每个对象转为默认字符串[object Object]，完全丢失了对象里的实际数据。
• 后来用JSON.stringify(selected_items)但后端直接遍历字符串，相当于遍历JSON字符串的每个字符，而非解析后的数组元素，自然无法获取有效数据。

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