如何基于AJAX实现数据库驱动的联动下拉菜单？已有请求函数

1. 搭建前端基础结构 #

先写第一个下拉菜单，以及用来放置第二个动态下拉的容器：

<!-- 第一个下拉菜单（初始选项可从数据库加载） -->
<select id="categorySelect">
  <option value="">请选择分类</option>
  <!-- 这里的选项可以在页面加载时通过AJAX获取，或由后端直接渲染 -->
</select>

<!-- 存放第二个下拉菜单的容器 -->
<div id="subCategoryContainer"></div>

2. 给第一个下拉绑定选择事件 #

选中选项时触发AJAX请求，获取对应子分类数据：

// 获取第一个下拉元素
const categorySelect = document.getElementById('categorySelect');

// 绑定change事件
categorySelect.addEventListener('change', function() {
  const selectedId = this.value;
  
  // 未选择值时清空容器
  if (!selectedId) {
    document.getElementById('subCategoryContainer').innerHTML = '';
    return;
  }
  
  // 调用函数请求子分类
  getSubCategories(selectedId);
});

3. 用你提供的ajaxRequest函数实现请求逻辑 #

把你给出的ajaxRequest函数放在全局可访问的位置，然后编写请求子分类的函数：

// 你提供的AJAX请求对象创建函数
function ajaxRequest() {var request=false;
    try { request = new XMLHttpRequest()}catch(e1){
    try{request = new ActiveXObject("Msxml2.XMLHTTP")}catch(e2){
    try{ request = new ActiveXObject("Microsoft.XMLHTTP")
    }catch(e3){request = false} }
    }
    return request }

// 请求子分类的函数
function getSubCategories(categoryId) {
  const request = ajaxRequest();
  if (!request) {
    alert('浏览器不支持AJAX，请升级');
    return;
  }
  
  // 打开请求，替换成你的后端接口地址
  request.open('GET', `/get-subcategories?category_id=${categoryId}`, true);
  
  // 监听请求状态变化
  request.onreadystatechange = function() {
    // 请求完成且响应成功
    if (request.readyState === 4 && request.status === 200) {
      // 假设后端返回JSON格式的子分类列表：[{id:1, name:"子分类1"}, ...]
      const subCats = JSON.parse(request.responseText);
      
      // 生成第二个下拉菜单的HTML
      let subSelect = '<select id="subCategorySelect">';
      subSelect += '<option value="">请选择子分类</option>';
      subCats.forEach(cat => {
        subSelect += `<option value="${cat.id}">${cat.name}</option>`;
      });
      subSelect += '</select>';
      
      // 将生成的下拉菜单插入容器
      document.getElementById('subCategoryContainer').innerHTML = subSelect;
    }
  };
  
  // 发送请求
  request.send();
}

4. 后端接口实现（以PHP为例） #

后端需要接收前端传递的分类ID，查询数据库后返回子分类数据：

<?php
// 连接数据库，替换为你的数据库信息
$dbHost = 'localhost';
$dbName = 'your_database';
$dbUser = 'your_username';
$dbPass = 'your_password';

try {
  $pdo = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8", $dbUser, $dbPass);
} catch(PDOException $e) {
  die('数据库连接失败：'.$e->getMessage());
}

// 获取前端传递的分类ID
$categoryId = isset($_GET['category_id']) ? intval($_GET['category_id']) : 0;

// 查询对应子分类
$stmt = $pdo->prepare('SELECT id, name FROM sub_categories WHERE category_id = ?');
$stmt->execute([$categoryId]);
$subCategories = $stmt->fetchAll(PDO::FETCH_ASSOC);

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

额外提示 #

• 第一个下拉菜单的初始选项，也可以用类似的AJAX请求在页面加载时获取，逻辑和getSubCategories类似，只是不需要传递参数。
• 如果后端直接返回拼接好的option标签，前端直接把request.responseText插入容器即可，无需自行循环生成。
• 可以添加加载提示，比如请求时在容器内显示“加载中...”，提升用户体验。

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