如何在Django中通过模板将Bootstrap Tab的ID传递至View.py？

当然有可行的方法！我之前在Django项目里实现过类似需求，给你分享几个靠谱的方案，按需选择就行：

这是最直观的方式，核心思路是监听Bootstrap Tab的切换事件，把当前选中的Tab ID存入表单的隐藏字段，提交表单时就会自动把这个ID一起发给服务器。

步骤如下：

1. 在表单里添加一个隐藏input：

<form method="post" action="{% url 'your_submit_url' %}">
  {% csrf_token %}
  <!-- 其他表单字段 -->
  <input type="hidden" id="active-tab-id" name="active_tab_id" value="">
  <button type="submit">提交</button>
</form>

2. 编写JavaScript监听Tab切换，同时初始化默认激活的Tab ID：

document.addEventListener('DOMContentLoaded', function() {
  // 初始化默认激活的Tab ID
  const initialActiveTab = document.querySelector('.nav-link.active');
  if (initialActiveTab) {
    document.getElementById('active-tab-id').value = initialActiveTab.id;
  }

  // 监听Tab切换事件（Bootstrap 5的事件名是shown.bs.tab）
  const tabElements = document.querySelectorAll('[data-bs-toggle="tab"]');
  tabElements.forEach(tab => {
    tab.addEventListener('shown.bs.tab', function(e) {
      // e.target是刚激活的Tab元素，获取它的ID
      const activeTabId = e.target.id;
      // 更新隐藏字段的值
      document.getElementById('active-tab-id').value = activeTabId;
    });
  });
});

3. 在Django视图里获取这个值：

def your_submit_view(request):
    if request.method == 'POST':
        active_tab_id = request.POST.get('active_tab_id')
        # 接下来就可以用这个ID做你需要的操作了
        # ...
    # 其他业务逻辑

如果不想用隐藏字段，也可以在切换Tab时直接修改表单的action属性，把Tab ID加到URL的查询参数里，提交时URL就会带上这个参数。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('form');
  const initialActiveTab = document.querySelector('.nav-link.active');
  
  // 初始化表单URL
  if (initialActiveTab) {
    const baseUrl = form.action.split('?')[0]; // 移除原有查询参数
    form.action = `${baseUrl}?tab_id=${initialActiveTab.id}`;
  }

  // 切换Tab时更新URL
  const tabElements = document.querySelectorAll('[data-bs-toggle="tab"]');
  tabElements.forEach(tab => {
    tab.addEventListener('shown.bs.tab', function(e) {
      const activeTabId = e.target.id;
      const baseUrl = form.action.split('?')[0];
      form.action = `${baseUrl}?tab_id=${activeTabId}`;
    });
  });
});

在Django视图里通过request.GET获取：

def your_submit_view(request):
    # 不管GET/POST都能拿到这个参数（因为URL里已携带）
    active_tab_id = request.GET.get('tab_id')
    # ...

如果想把Tab ID作为URL路径的一部分（比如/submit/{tab_id}/），可以提前在urls.py里定义带参数的路由，切换Tab时修改表单action为对应路径即可。

如果你的提交是无刷新的AJAX请求，直接把Tab ID作为请求数据的一部分发送就行，代码更简洁：

document.addEventListener('DOMContentLoaded', function() {
  const submitBtn = document.querySelector('button[type="submit"]');
  
  submitBtn.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认表单提交行为
    const activeTab = document.querySelector('.nav-link.active');
    const activeTabId = activeTab ? activeTab.id : '';
    
    // 收集表单数据并加入Tab ID
    const formData = new FormData(document.querySelector('form'));
    formData.append('active_tab_id', activeTabId);
    
    // 发送AJAX请求
    fetch("{% url 'your_submit_url' %}", {
      method: 'POST',
      headers: {
        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
      },
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      // 处理服务器返回的结果
      console.log(data);
    })
    .catch(error => {
      console.error('提交出错:', error);
    });
  });
});

视图里依然用request.POST.get('active_tab_id')获取即可。

这些方法都亲测有效，你可以根据自己的项目场景选最合适的~

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