Ajax POST提交多个同名input时Django仅获取首个值问题求解

你拿不到全量输入值是两个逻辑错误导致的，和Django、Ajax本身的机制无关：

• 你写的$('#personals').val()只会返回jQuery匹配到的第一个DOM元素的值，根本不会收集所有同名字段的内容，传给后端的本来就只有第一个输入框的内容。
• Django中request.POST.get(字段名)永远只会返回该字段对应的第一个值，要获取同名字段的多值必须用getlist()，不管是普通表单提交还是Ajax提交都遵循这个规则。
• 额外提醒：给多个输入框设置相同id是违反HTML规范的，id必须全局唯一，这也会导致DOM查询出现各种预期外的问题。

两种写法都可以正常运行，选你习惯的即可。

方案一：使用不带方括号的name属性（匹配你当前的命名习惯） #

1. 修正HTML代码，去掉重复id，所有需要批量取值的输入框统一name为personals即可：

<input type="text" name="personals" placeholder='Email'> 
<input type="text" name="personals" placeholder='Phone'>
<!-- 后续动态新增的输入框只要保持name="personals"就行，不需要设置重复id -->

2. 修正Ajax提交逻辑，主动收集所有同名字段的值组成数组再传递：

$.ajax({
    type: 'POST',
    cache: false,
    url: "{% url 'creator:build' %}",
    data: {
        name: $('#name').val(),
        // 遍历所有name=personals的输入框，收集值组成数组
        personals: $('input[name="personals"]').map(function(){
            return $.trim($(this).val());
        }).get(),
        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
    },
    success: function (response) {
        // 自行处理提交成功后的逻辑
    }
})

3. 修正Django后端取值逻辑，把get()换成getlist()：

def build(request):
    if request.user.is_authenticated:
        if request.method == 'POST':
            name = request.POST.get('name')
            personals = request.POST.getlist('personals')
            # 此时personals就是包含所有同名字段输入值的列表，例如['user@example.com', '13800138000']

方案二：沿用带[]后缀的name属性（和你最初普通表单提交逻辑一致） #

如果你习惯用[]标识数组类型字段，也可以改回最初的name写法：

1. HTML部分把name改回personals[]，同样不要设置重复id：

<input type="text" name="personals[]" placeholder='Email'> 
<input type="text" name="personals[]" placeholder='Phone'>

2. Ajax部分只需要把选择器的name值对应改成personals[]即可，收集数组的逻辑不变：

personals: $('input[name="personals[]"]').map(function(){
    return $.trim($(this).val());
}).get(),

3. 后端直接用你最初写的request.POST.getlist('personals[]')就能拿到全量值，和普通表单提交的逻辑完全一致。

如果你的输入字段都放在同一个form标签里，根本不需要手动逐个拼接提交参数，直接用FormData序列化原生表单即可，浏览器会自动处理同名字段的多值问题，后续动态新增多少输入框都不用改JS逻辑：

// 给表单绑定提交事件
$('#yourForm').submit(function(e){
    e.preventDefault(); // 阻止默认表单跳转提交
    $.ajax({
        type: 'POST',
        cache: false,
        url: "{% url 'creator:build' %}",
        data: new FormData(this), // 直接序列化当前表单，自动包含csrf token和所有字段
        processData: false,
        contentType: false,
        success: function (response) {
            // 处理提交成功逻辑
        }
    })
})

这种写法下后端还是用getlist()取同名字段的多值即可，不需要额外调整。

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