Django框架下使用AJAX传递数组到后端失败问题求助

问题根因 #

jQuery的AJAX在传递数组类型参数时，默认会启用参数深度序列化规则，自动给数组对应的参数名追加[]后缀。你前端声明的参数是num1，实际发送到后端的参数名会变为num1[]，因此你在Django视图中用request.POST.get('num1')无法匹配到对应参数，返回None。

可行解决方法 #

方法1：前端开启traditional序列化模式（最便捷） #

在AJAX配置中添加traditional: true参数，禁用jQuery的深度序列化，保持参数名不变，后端仅需调整取值方法即可：

function add_var() {
    var aa = [5,10,15];
    $.ajax({
        url : "add_variable/",
        type : "POST",
        traditional: true, // 新增这一行配置
        data : { num1 : aa},
        success : function(json) {
            $('#num3').val(json); 
        },
        error : function() {
            console.log("fail");
        }
    });
};

后端Django取值代码：

# 多值参数不能用get，必须用getlist才能拿到完整数组
num_list = request.POST.getlist('num1')
# 如需转换为数值类型可自行处理：
num_list = list(map(int, num_list))

方法2：后端直接匹配带[]的参数名 #

如果不想修改前端代码，直接在Django中适配实际收到的参数名即可：

num_list = request.POST.getlist('num1[]')

方法3：前端转JSON字符串传递，后端解析 #

适合传递复杂嵌套结构的场景，前端先把数组转为JSON字符串发送：

function add_var() {
    var aa = [5,10,15];
    $.ajax({
        url : "add_variable/",
        type : "POST",
        data : { num1 : JSON.stringify(aa)},
        success : function(json) {
            $('#num3').val(json); 
        },
        error : function() {
            console.log("fail");
        }
    });
};

后端解析JSON即可：

import json
num_list = json.loads(request.POST.get('num1'))

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