如何用PHP+Ajax实现餐品类别与产品下拉联动及展示？

我来一步步帮你搞定这个需求，核心是用Ajax异步请求实现无刷新更新产品列表和详情，具体分前端JS、后端接口两部分来拆解：

1. 前端JavaScript部分（监听选择+更新DOM） #

先给类别下拉框绑定change事件，用户切换类别时就发送请求到后端拿对应产品数据，再更新产品下拉列表和默认详情。把这段代码放到页面底部（或用DOMContentLoaded包裹）：

// 获取页面元素
const categorySelect = document.getElementById('cat');
const mealSelect = document.getElementById('meal');
const mealDetails = document.getElementById('meal-details');
const detailImg = mealDetails.querySelector('img');
const detailDesc = mealDetails.querySelector('p');
const detailPrice = mealDetails.querySelector('strong');

// 监听类别下拉框的切换事件
categorySelect.addEventListener('change', function() {
    const categoryId = this.value;
    
    // 发送Ajax请求到后端接口
    fetch(`get-meals.php?id_cat=${categoryId}`)
        .then(response => response.json())
        .then(data => {
            // 清空现有产品下拉列表
            mealSelect.innerHTML = '';
            
            // 遍历返回的产品数据，生成新的option
            data.forEach(meal => {
                const option = document.createElement('option');
                option.value = meal.Id;
                option.textContent = meal.Name;
                mealSelect.appendChild(option);
            });
            
            // 如果有产品，默认显示第一个的详情
            if (data.length > 0) {
                updateMealDetails(data[0]);
            } else {
                // 无产品时清空详情区域
                detailImg.src = '';
                detailImg.alt = 'Aucun produit disponible';
                detailDesc.textContent = '';
                detailPrice.textContent = '';
            }
        })
        .catch(error => {
            console.error('Erreur lors de la récupération des produits:', error);
        });
});

// 监听产品下拉框切换，更新详情
mealSelect.addEventListener('change', function() {
    const mealId = this.value;
    fetch(`get-meal-details.php?id=${mealId}`)
        .then(response => response.json())
        .then(meal => {
            updateMealDetails(meal);
        })
        .catch(error => {
            console.error('Erreur lors de la récupération du détail:', error);
        });
});

// 统一更新产品详情的工具函数
function updateMealDetails(meal) {
    detailImg.src = meal.Photo; // 替换成你数据库中存储图片路径的字段名
    detailImg.alt = `Photo de ${meal.Name}`;
    detailDesc.textContent = meal.Description; // 替换成产品描述的字段名
    detailPrice.textContent = meal.Price; // 替换成产品价格的字段名
}

// 页面加载完成后，自动触发一次类别选择事件，显示默认类别产品
document.addEventListener('DOMContentLoaded', function() {
    categorySelect.dispatchEvent(new Event('change'));
});

2. 后端接口部分（处理请求+返回数据） #

需要两个PHP接口（也可以合并成一个，看你需求）：一个根据类别ID返回产品列表，一个根据产品ID返回详情。

2.1 获取对应类别的产品列表（get-meals.php） #

<?php
// 替换成你的数据库连接信息
$pdo = new PDO('mysql:host=localhost;dbname=你的数据库名;charset=utf8', '用户名', '密码');

// 获取前端传过来的类别ID
$id_cat = $_GET['id_cat'];

// 预处理SQL，避免注入
$sql = 'SELECT * FROM meal WHERE id_cat = ?';
$stmt = $pdo->prepare($sql);
$stmt->execute([$id_cat]);

// 获取所有产品数据
$meals = $stmt->fetchAll(PDO::FETCH_ASSOC);

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

2.2 获取单个产品详情（get-meal-details.php） #

<?php
$pdo = new PDO('mysql:host=localhost;dbname=你的数据库名;charset=utf8', '用户名', '密码');

$mealId = $_GET['id'];

$sql = 'SELECT * FROM meal WHERE Id = ?';
$stmt = $pdo->prepare($sql);
$stmt->execute([$mealId]);

$meal = $stmt->fetch(PDO::FETCH_ASSOC);

header('Content-Type: application/json');
echo json_encode($meal);
?>

注意事项 #

• 确保你的meal表包含Id、Name、Description、Price、Photo、id_cat这些字段（字段名不同的话，记得同步修改代码里的对应名称）。
• 数据库连接部分要替换成你自己的真实配置。
• 若想优化性能，可以在获取产品列表时一次性返回所有产品的详情，这样切换产品时不用再发请求，直接从本地数据中读取即可。

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