如何将JavaScript选中的审批人传递给Django并在模态框展示

我用Django开发功能，需要把表单里选中的审批人（复选框）传递到模态框，现在JS能拿到选中的复选框数据，但没法传给Django，导致模态框显示所有符合条件的审批人，而不是选中的。需要在表单提交前完成这个操作。

相关代码 #

AJAX代码 #

$("#avail").on("click", function(event) {
   var modalavail = document.getElementById("myModalavail");
   var markedCheckbox = document.querySelectorAll('input[type="checkbox"]:checked');
   event.preventDefault();
   $(window).unbind('beforeunload');
   $.ajax({
       method: 'get',
       headers: { "X-CSRFToken": token },
       url: "",
       processData: false,
       contentType: false,
       cache: false,
       enctype: 'multipart/form-data',
       success: function(resp) {
         modalavail.style.display = "block";
         for (var checkbox of markedCheckbox) {
         console.log(checkbox.value + ' ');
       }
       },
       error: function (request, status, error) {
         console.log(request.responseText);
         showAjaxFormErrors(JSON.parse(request.responseText));
         $('html, body').animate({ scrollTop: 0 }, 50);
         },
      });
   });

HTML代码 #

<button class="button209" id="avail">Check Availability</button>

<div id="myModalavail" class="modal">
  <div class="modal-content">
    <span class="close"></span>
    <img class="logo4" src="/static/images/threecircles.svg">

    <div class="table56">
      {% for entry in form.approvers %}
        <table class="table57">
          <thead>
            <tr>
              <th class="title156">Name</th>
              <th class="title118">Available?</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="title156">{{ entry.name }}</td>
              <td class="title117">Yes</td>
            </tr>
          </tbody>
        </table>
      {% endfor %}
    </div>
    <input type="hidden" id="modal-approvers">
    <button type="button" class="button210" id="modalcloseavail">Close</button>
  </div>
</div>

Form代码 #

class DailyPlannerForm(forms.ModelForm):
    class Meta:
        model = NewDailyPlannerEvent
        exclude = [ 'created_by','summary']

    def __init__(self, user, *args, **kwargs):
        start_time = kwargs.pop('start_time', None)
        User = get_user_model()
        super(DailyPlannerForm, self).__init__(*args, **kwargs)
        self.fields['approvers'] = forms.ModelMultipleChoiceField(
                                widget=forms.CheckboxSelectMultiple(),
                                queryset=User.objects.exclude(Q(is_active=False)).order_by('last_name','first_name'),required=False)

    def clean(self):
        cleaned_data = super(DailyPlannerForm, self).clean()
        approvers = cleaned_data.get('approvers')

Model代码 #

class NewDailyPlannerEvent(models.Model):

    STATUS_CHOICES = (
    ("AwaitingResponse","AwaitingResponse"),
    ("Cancelled","Cancelled"),
    ("Declined","Declined"),
    ("Delete","Delete"),
    ("Saved","Saved"),
    ("Scheduled","Scheduled"),
    ("Submitted","Submitted"),
)

STATUS_CHOICES1 = (
    ("Cancel","Cancel"),
)

STATUS_CHOICES3 = (
    ("True","True"),
    ("False","False"),
    ("N/A","N/A")
)

approver_by_department = models.ManyToManyField(Department,related_name="new_daily_planner_event_approver_by_department")
approvers = models.ManyToManyField(User)
created_by = models.ForeignKey(User,null=True,on_delete=models.CASCADE,related_name='new_daily_planner_event_created_by')
creation_date = models.DateTimeField(editable=False,null=True)
daily_planner_event_creation_date = models.DateTimeField(editable=False,null=True)
daily_planner_event_name = models.CharField(max_length=255,blank=True)
last_update = models.DateTimeField(null=True)        
request_type = models.CharField(choices=REQUEST_TYPE,default="New Daily Planner Event Request",max_length=35)
start_time = models.DateTimeField(null=True,blank=True)
status = models.CharField(choices=STATUS_CHOICES,default="Submitted",max_length=20)
submitted = models.CharField(choices=STATUS_CHOICES3,default="False",null=True,blank=True,max_length=20)
    
class Meta:
    ordering = ["daily_planner_event_name"]
    
def __str__(self):
    return self.daily_planner_event_name
    
def get_absolute_url(self):
    return reverse("DailyPlannerEvents:create_daily_planner_event_detail",kwargs={'pk':self.pk})

解决方案 #

1. 修改AJAX请求，传递选中的审批人ID #

当前AJAX未将选中数据传给后端，需收集选中ID并作为参数发送：

$("#avail").on("click", function(event) {
  var modalavail = document.getElementById("myModalavail");
  // 收集选中的审批人ID数组
  var markedCheckbox = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);
  event.preventDefault();
  $(window).unbind('beforeunload');
  $.ajax({
    method: 'GET',
    headers: { "X-CSRFToken": token },
    // 通过查询参数传递选中ID
    url: `?approver_ids=${markedCheckbox.join(',')}`,
    success: function(resp) {
      // 用后端返回的HTML填充模态框表格
      $('.table56').html(resp);
      modalavail.style.display = "block";
    },
    error: function (request, status, error) {
      console.log(request.responseText);
      showAjaxFormErrors(JSON.parse(request.responseText));
      $('html, body').animate({ scrollTop: 0 }, 50);
    },
  });
});

2. 后端视图处理请求，返回选中审批人的HTML片段 #

在对应视图函数中，接收并处理传递的ID，过滤出选中用户后返回模态框表格片段：

from django.shortcuts import render
from django.contrib.auth import get_user_model

def your_view(request):
    # 原有视图逻辑...
    if request.GET.get('approver_ids'):
        approver_ids = request.GET.get('approver_ids').split(',')
        User = get_user_model()
        selected_approvers = User.objects.filter(id__in=approver_ids, is_active=True).order_by('last_name','first_name')
        # 渲染单独的表格模板片段
        return render(request, 'modal_approvers_table.html', {'approvers': selected_approvers})
    # 原有视图逻辑...

3. 创建模态框表格模板片段（modal_approvers_table.html） #

把原HTML中的循环部分抽为单独模板：

{% for entry in approvers %}
  <table class="table57">
    <thead>
      <tr>
        <th class="title156">Name</th>
        <th class="title118">Available?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="title156">{{ entry.get_full_name }}</td>
        <td class="title117">Yes</td>
      </tr>
    </tbody>
  </table>
{% endfor %}

4. 修改原HTML模态框内容 #

将原循环部分改为空容器，等待AJAX填充：

<div id="myModalavail" class="modal">
  <div class="modal-content">
    <span class="close"></span>
    <img class="logo4" src="/static/images/threecircles.svg">

    <div class="table56">
      <!-- 内容将由AJAX动态填充 -->
    </div>
    <input type="hidden" id="modal-approvers">
    <button type="button" class="button210" id="modalcloseavail">Close</button>
  </div>
</div>

补充说明 #

• GET请求无需processData: false、contentType: false等配置，可直接删除。
• 若需检查审批人可用性，可在视图中添加逻辑修改"Available?"列内容。

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