Django后台产品添加时分类与关联子分类选择问题

这个需求其实就是常见的分类联动场景，前后端配合一下就能轻松实现，我给你拆解成后端接口和前端交互两部分来详细说：

一、后端接口实现 #

首先你需要写一个接口，用来接收前端传来的分类ID，返回对应的子分类数据：

• 接口需要接收category_id参数（就是第一个选择框选中的分类ID）
• 用参数查询Subcategory表，注意一定要用参数绑定防止SQL注入，示例SQL如下：

  SELECT id, name FROM Subcategory WHERE category_id = :category_id
  

• 查询完成后，把结果转换成JSON格式返回，返回的数据结构大概是这样：

  [{"id":1,"name":"手机"},{"id":2,"name":"电脑"},{"id":3,"name":"平板"}]
  

举个PHP后端的简单示例（用PDO保证安全性）：

<?php
// 连接数据库，替换成你的数据库信息
$pdo = new PDO('mysql:host=localhost;dbname=your_db;charset=utf8', 'db_user', 'db_pwd');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$category_id = $_GET['category_id'] ?? '';
$subcategories = [];

if ($category_id && is_numeric($category_id)) {
    $stmt = $pdo->prepare('SELECT id, name FROM Subcategory WHERE category_id = ?');
    $stmt->execute([$category_id]);
    $subcategories = $stmt->fetchAll(PDO::FETCH_ASSOC);
}

// 返回JSON格式数据
header('Content-Type: application/json');
echo json_encode($subcategories);
?>

二、前端交互实现 #

前端需要监听第一个分类选择框的变化，动态请求后端接口并更新子分类选择框：

先写HTML结构示例：

<select id="category-select">
  <option value="">请选择分类</option>
  <!-- 这里的分类选项可以从Category表后端渲染生成 -->
  <option value="1">电子产品</option>
  <option value="2">家居用品</option>
</select>

<select id="subcategory-select">
  <option value="">请先选择分类</option>
</select>

然后用原生JavaScript实现联动逻辑：

const categorySelect = document.getElementById('category-select');
const subcategorySelect = document.getElementById('subcategory-select');

// 监听分类选择框的change事件
categorySelect.addEventListener('change', async function() {
    const categoryId = this.value;
    // 先清空子分类选择框
    subcategorySelect.innerHTML = '<option value="">请先选择分类</option>';
    
    // 如果没有选中分类，直接返回
    if (!categoryId) return;
    
    try {
        // 请求后端接口，替换成你的接口地址
        const response = await fetch(`/your-api-path?category_id=${categoryId}`);
        const subcategories = await response.json();
        
        if (subcategories.length > 0) {
            // 遍历子分类数据，生成option元素添加到选择框
            subcategories.forEach(subcat => {
                const option = document.createElement('option');
                option.value = subcat.id;
                option.textContent = subcat.name;
                subcategorySelect.appendChild(option);
            });
        } else {
            subcategorySelect.innerHTML = '<option value="">该分类暂无子分类</option>';
        }
    } catch (error) {
        console.error('加载子分类失败:', error);
        subcategorySelect.innerHTML = '<option value="">加载失败，请重试</option>';
    }
});

三、额外注意事项 #

• 一定要使用参数绑定来查询数据库，避免直接拼接SQL导致注入漏洞
• 前端要处理请求失败的情况，给用户友好的提示
• 如果用Vue、React这类前端框架，写法会更简洁（比如Vue用watch监听分类值变化，React用useState和useEffect组合实现）

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