Django中通过按钮触发查询并展示对应分类的子分类

下面提供两种可行方案，分别适配页面跳转和无刷新异步加载场景：

方案一：页面跳转式查询（简单直接） #

1. 修改分类列表模板 #

把原模板中「Subcategories」链接改成带分类ID的跳转链接：

<td><a href="{% url 'subcategories_by_category' category.id %}" class="btn">Subcategories</a></td>

2. 配置URL路由 #

在项目urls.py中添加子分类列表的路由：

from django.urls import path
from . import views

urlpatterns = [
    # 原有分类列表路由
    path('categories/', views.category_list, name='category_list'),
    # 子分类路由，接收分类ID参数
    path('categories/<int:category_id>/subcategories/', views.subcategory_list, name='subcategories_by_category'),
]

3. 编写视图函数 #

在views.py中添加处理子分类查询的视图：

from django.shortcuts import render
from .models import Category, Subcategory

def category_list(request):
    categories = Category.objects.all()
    return render(request, 'your_category_template.html', {'categories': categories})

def subcategory_list(request, category_id):
    # 根据分类ID过滤子分类
    subcategories = Subcategory.objects.filter(category_id=category_id)
    # 获取当前分类信息，用于页面标题显示
    current_category = Category.objects.get(id=category_id)
    return render(request, 'subcategory_list.html', {
        'subcategories': subcategories,
        'current_category': current_category
    })

4. 编写子分类列表模板（subcategory_list.html） #

<h2>Subcategories: {{ current_category.name }}</h2>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Subcategory Name</th>
            <th>Updated At</th>
        </tr>
    </thead>
    <tbody>
        {% for subcat in subcategories %}
        <tr>
            <td>{{ subcat.id }}</td>
            <td>{{ subcat.name }}</td>
            <td>{{ subcat.updated|date:"d.m.Y G:i:s" }}</td>
        </tr>
        {% empty %}
        <tr>
            <td colspan="3">No subcategories under this category.</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<a href="{% url 'category_list' %}">← Back to Categories</a>

方案二：AJAX无刷新查询（用户体验更好） #

1. 修改分类列表模板 #

把链接改成按钮，同时添加子分类容器：

<td>
  <button class="view-subcats-btn" data-category-id="{{ category.id }}">Subcategories</button>
  <!-- 用于动态显示子分类的容器 -->
  <div class="subcat-container" id="subcats-{{ category.id }}" style="display: none; margin-top: 10px;"></div>
</td>

2. 配置AJAX路由 #

在urls.py中添加AJAX接口路由：

path('ajax/get-subcategories/<int:category_id>/', views.get_subcategories_ajax, name='get_subcategories_ajax'),

3. 编写AJAX视图函数 #

在views.py中编写返回JSON数据的视图：

from django.http import JsonResponse
from .models import Subcategory

def get_subcategories_ajax(request, category_id):
    # 只返回需要的字段，转成JSON格式
    subcategories = Subcategory.objects.filter(category_id=category_id).values('id', 'name', 'updated')
    return JsonResponse(list(subcategories), safe=False)

4. 添加前端JS逻辑 #

在分类模板底部添加JavaScript处理点击事件：

document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.view-subcats-btn');
    
    buttons.forEach(btn => {
        btn.addEventListener('click', function() {
            const categoryId = this.getAttribute('data-category-id');
            const container = document.getElementById(`subcats-${categoryId}`);
            
            // 如果已加载过，直接切换显示状态
            if (container.innerHTML) {
                container.style.display = container.style.display === 'none' ? 'block' : 'none';
                return;
            }
            
            // 发送AJAX请求
            fetch(`/ajax/get-subcategories/${categoryId}/`)
                .then(res => res.json())
                .then(data => {
                    let html = '<ul style="list-style: none; padding-left: 0;">';
                    data.forEach(subcat => {
                        // 格式化日期，和原模板保持一致
                        const updatedDate = new Date(subcat.updated).toLocaleString('ru-RU', {
                            day: '2-digit',
                            month: '2-digit',
                            year: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit',
                            second: '2-digit'
                        });
                        html += `<li>ID: ${subcat.id} | Name: ${subcat.name} | Updated: ${updatedDate}</li>`;
                    });
                    html += '</ul>';
                    container.innerHTML = html;
                    container.style.display = 'block';
                })
                .catch(err => console.error('Load subcategories failed:', err));
        });
    });
});

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