Django中如何将jQuery获取的复选框ID传递至视图函数？已尝试request.GET.getlist('vals')但失败

开发者阿泽

2026-4-29

我来帮你搞定这个问题！你的代码现在有几个关键问题需要修正，下面分两种实用方案给你详细说明：

方案1：使用AJAX POST请求（推荐，更安全）

这个方案适合需要异步提交数据、不想刷新页面的场景，也是Django中处理这类需求的常规方式。

1. 修正前端JavaScript代码

你之前的JS只收集了选中的ID，但没有发送请求到后端，而且语法有误。现在加上AJAX逻辑，并处理Django必需的CSRF令牌：

<script>
$(document).ready(function(){
  $("button").click(function(e){
    // 阻止按钮默认的跳转行为（因为原来的a标签会直接跳转）
    e.preventDefault();
    
    // 收集所有选中复选框的ID
    var selectedIds = [];
    $.each($("input[name='checkb']:checked"), function(){
      selectedIds.push($(this).attr('id'));
    });

    // 发送POST请求到后端视图
    $.ajax({
      type: 'POST',
      url: "{% url 'eprint' %}", // 用Django的url标签生成正确路由
      data: {
        'selected_ids': selectedIds, // 这里的键名要和后端接收的一致
        // 带上CSRF令牌，避免Django的CSRF验证错误
        'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
      },
      success: function(response){
        alert("提交成功！选中的ID：" + selectedIds.join(", "));
        // 这里可以加成功后的逻辑，比如刷新页面、展示结果等
      },
      error: function(){
        alert("提交失败，请重试");
      }
    });
  });
});
</script>

2. 完善HTML结构

确保页面包含CSRF令牌，同时修正按钮和复选框的结构：

<!-- 页面中添加CSRF隐藏输入框（如果已有form可以省略，Django表单会自动生成） -->
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">

<!-- 修正按钮的HTML，去掉a标签的默认跳转 -->
<td><button><i class="bi bi-sim"></i></button></td>

<!-- 复选框不需要每个单独套form，统一放在循环里即可 -->
{% for l in object_list %}
<tr>
<td>
<label><input type="checkbox" id="{{ l.pk }}" name="checkb"></label>
</td>
...
{% endfor %}

3. 修改后端视图函数

用request.POST.getlist()接收前端传来的ID列表：

from django.http import JsonResponse

def eprint(request):
    if request.method == 'POST':
        # 接收前端传来的selected_ids列表
        selected_ids = request.POST.getlist('selected_ids')
        print("选中的ID列表：", selected_ids)
        
        # 这里可以添加你的业务逻辑，比如根据ID查询数据、生成打印内容等
        
        # 返回JSON响应给前端
        return JsonResponse({'status': 'success', 'ids': selected_ids})
    # 如果是GET请求，返回提示或页面
    return HttpResponse("请通过POST提交选中的ID")

方案2：使用GET请求（简单场景）

如果不需要异步交互，只想跳转页面并传递参数，可以用这种方式：

1. 前端JavaScript修改

收集ID后拼接成URL参数，再跳转：

<script>
$(document).ready(function(){
  $("button").click(function(e){
    e.preventDefault();
    
    var selectedIds = [];
    $.each($("input[name='checkb']:checked"), function(){
      selectedIds.push($(this).attr('id'));
    });

    // 拼接URL，把每个ID作为vals参数传递
    var url = "{% url 'eprint' %}?vals=" + selectedIds.join("&vals=");
    window.location.href = url;
  });
});
</script>

2. 后端视图函数修改

用request.GET.getlist()获取参数：

def eprint(request):
    # 接收GET请求中的vals列表
    selected_ids = request.GET.getlist('vals')
    print("选中的ID列表：", selected_ids)
    
    # 后续业务逻辑，比如渲染打印页面等
    
    return render(request, 'print_template.html', {'selected_ids': selected_ids})

关键注意点

前端传递的参数名（比如selected_ids或vals）必须和后端getlist()里的参数名完全一致。
POST请求必须处理CSRF令牌，否则Django会拒绝请求。
你的原代码中request.GET.getlist(vals)是错误的，应该写成request.GET.getlist('vals')（引号不能少）。

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