如何用AJAX实现品牌与产品下拉框联动，从数据库获取对应数据

兄弟，别愁了！我给你拆解成一步步的操作，完全从0开始，哪怕你不懂AJAX也能跟着做出来。核心逻辑就是：选品牌的时候，偷偷让浏览器给服务器发个请求，拿对应品牌的产品数据，再更新产品下拉框。

第一步：先搭前端HTML架子 #

先把两个下拉框写好，品牌下拉框可以先手动写死测试（后面再改成从数据库加载），产品下拉框先放个提示：

<!-- 品牌选择框 -->
<select id="brandSelect">
  <option value="">选个品牌先</option>
  <option value="ADIDAS">ADIDAS</option>
  <option value="NIKE">NIKE</option>
</select>

<!-- 产品选择框，初始状态提示选品牌 -->
<select id="productSelect">
  <option value="">请先选品牌</option>
</select>

第二步：写AJAX核心代码（原生JS，不用依赖任何框架） #

这部分是实现联动的关键，我给你写好注释，你直接复制到HTML的<script>标签里就行：

// 先拿到两个下拉框的DOM元素
const brandBox = document.getElementById('brandSelect');
const productBox = document.getElementById('productSelect');

// 监听品牌框的选择变化事件
brandBox.addEventListener('change', function() {
  const chosenBrand = this.value; // 拿到用户选的品牌名

  // 如果用户没选品牌，就重置产品框
  if (!chosenBrand) {
    productBox.innerHTML = '<option value="">请先选品牌</option>';
    return;
  }

  // 开始AJAX请求——说白了就是偷偷给服务器发消息要数据
  const request = new XMLHttpRequest();
  // 告诉浏览器要请求哪个文件，把选的品牌传过去（encodeURIComponent是防止乱码）
  request.open('GET', `get_products.php?brand=${encodeURIComponent(chosenBrand)}`, true);

  // 服务器返回数据后的处理逻辑
  request.onload = function() {
    if (this.status === 200) { // 请求成功的标志
      // 把服务器返回的JSON数据转成JS能懂的数组
      const products = JSON.parse(this.responseText);

      // 清空产品框，重新加选项
      productBox.innerHTML = '<option value="">选个产品吧</option>';
      products.forEach(item => {
        const option = document.createElement('option');
        option.value = item.product_id; // 用产品ID当选项值，方便后续用
        option.textContent = item.product_name; // 显示产品名
        productBox.appendChild(option);
      });
    } else {
      // 请求失败就提示一下
      productBox.innerHTML = '<option value="">加载产品失败啦</option>';
    }
  };

  // 发送请求
  request.send();
});

第三步：写后端处理文件（get_products.php） #

这个文件负责接收前端传过来的品牌名，去数据库查对应的产品，再把数据返回给前端。记得替换成你自己的数据库信息：

<?php
// 数据库连接信息，改成你自己的！
$db_host = 'localhost';
$db_name = '你的数据库名称';
$db_user = '数据库用户名';
$db_pass = '数据库密码';

try {
  // 连接数据库（用PDO比较安全）
  $pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8", $db_user, $db_pass);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  // 拿到前端传的品牌名
  $target_brand = isset($_GET['brand']) ? $_GET['brand'] : '';

  // 如果没拿到品牌，返回空数组
  if (empty($target_brand)) {
    echo json_encode([]);
    exit;
  }

  // 去product表查对应品牌的产品（你的表字段是brand_name，所以用这个匹配）
  $sql = "SELECT product_id, product_name FROM product WHERE brand_name = :brand";
  $stmt = $pdo->prepare($sql);
  $stmt->bindParam(':brand', $target_brand);
  $stmt->execute();

  // 把查询结果转成数组
  $product_list = $stmt->fetchAll(PDO::FETCH_ASSOC);

  // 把数组转成JSON格式返回给前端
  echo json_encode($product_list);

} catch(PDOException $e) {
  // 数据库出错的话，返回空数组
  echo json_encode([]);
}
?>

第四步：优化品牌下拉框（从数据库自动加载） #

如果你不想手动写品牌选项，可以在HTML里用PHP从brands表加载，这样以后加品牌不用改HTML：

<select id="brandSelect">
  <option value="">选个品牌先</option>
  <?php
  // 这里同样用上面的数据库连接代码，先连接数据库
  $stmt = $pdo->prepare("SELECT brand_id, brand_name FROM brands");
  $stmt->execute();
  $brands = $stmt->fetchAll(PDO::FETCH_ASSOC);
  // 循环输出品牌选项
  foreach($brands as $brand) {
    echo "<option value='{$brand['brand_name']}'>{$brand['brand_name']}</option>";
  }
  ?>
</select>

必看注意事项 #

1. 必须在本地服务器环境下运行（比如XAMPP、WAMP），不能直接双击HTML文件打开，因为AJAX需要HTTP协议支持
2. 数据库连接信息一定要填对，字符集用utf8防止乱码
3. get_products.php要和你的HTML文件放在同一个服务器目录下
4. 如果你的后端用的是Python/Node.js，逻辑是一样的：接收品牌参数→查数据库→返回JSON数据

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