基于Ajax、PHP与MariaDB实现动态下拉选择的技术求助

我来帮你把这个动态下拉选择的实现完整梳理出来，结合你给出的HTML片段，咱们一步步把功能补全并优化：

1. 完善后的HTML页面（含下拉框结构） #

首先，我们需要在你的现有HTML基础上，添加触发动态更新的下拉框（比如“年级”）和待填充的目标下拉框（比如“班级”），同时确保结构清晰：

<div class="student-data-block">
  <div class="row">
    <div class="col-md-6">
      <label>Nombre</label>
      <input type="text" name="name" value="" placeholder="Ingrese el nombre"/>
    </div>
    <div class="col-md-6">
      <label>Grado (年级)</label>
      <!-- 第一个下拉框，页面加载时从数据库获取选项 -->
      <select id="gradeSelect" name="grade">
        <option value="">Seleccione un grado</option>
      </select>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-md-6">
      <label>Clase (班级)</label>
      <!-- 动态填充的第二个下拉框 -->
      <select id="classSelect" name="class">
        <option value="">Seleccione una clase primero</option>
      </select>
    </div>
  </div>
</div>

<!-- 引入本地jQuery库（建议下载本地文件，避免外链依赖） -->
<script src="jquery.min.js"></script>
<script src="script.js"></script>

2. Ajax请求逻辑（script.js） #

接下来编写Ajax代码，监听第一个下拉框的变化，发起请求获取对应数据并更新第二个下拉框：

$(document).ready(function() {
  // 页面加载完成后，先加载第一个下拉框的选项（年级）
  loadGrades();

  // 监听年级下拉框的变化事件
  $('#gradeSelect').change(function() {
    const gradeId = $(this).val();
    
    // 如果未选择年级，清空班级下拉框
    if (!gradeId) {
      $('#classSelect').html('<option value="">Seleccione una clase primero</option>');
      return;
    }

    // 发起Ajax请求获取对应年级的班级
    $.ajax({
      url: 'get_classes.php',
      type: 'POST',
      data: { grade_id: gradeId },
      dataType: 'json',
      success: function(response) {
        // 构建班级下拉选项
        let options = '<option value="">Seleccione una clase</option>';
        response.forEach(classItem => {
          // 转义特殊字符防止XSS
          const className = $('<div>').text(classItem.name).html();
          options += `<option value="${classItem.id}">${className}</option>`;
        });
        $('#classSelect').html(options);
      },
      error: function() {
        $('#classSelect').html('<option value="">Error al cargar clases</option>');
      }
    });
  });

  // 加载年级选项的函数
  function loadGrades() {
    $.ajax({
      url: 'get_grades.php',
      type: 'GET',
      dataType: 'json',
      success: function(response) {
        let options = '<option value="">Seleccione un grado</option>';
        response.forEach(gradeItem => {
          const gradeName = $('<div>').text(gradeItem.name).html();
          options += `<option value="${gradeItem.id}">${gradeName}</option>`;
        });
        $('#gradeSelect').html(options);
      },
      error: function() {
        $('#gradeSelect').html('<option value="">Error al cargar grados</option>');
      }
    });
  }
});

3. PHP数据库查询脚本 #

3.1 获取年级列表（get_grades.php） #

这个脚本负责从数据库查询所有年级数据，返回JSON格式：

<?php
// 数据库连接配置（请替换为你的实际信息）
$host = 'localhost';
$dbname = 'tu_base_de_datos';
$username = 'tu_usuario';
$password = 'tu_contraseña';

try {
  // 使用PDO连接数据库（更安全、灵活）
  $pdo = new PDO(
    "mysql:host=$host;dbname=$dbname;charset=utf8",
    $username,
    $password,
    [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
  );

  // 查询年级数据
  $stmt = $pdo->query("SELECT id, name FROM grades ORDER BY name ASC");
  $grades = $stmt->fetchAll(PDO::FETCH_ASSOC);

  // 返回JSON响应
  header('Content-Type: application/json');
  echo json_encode($grades);
} catch(PDOException $e) {
  // 出错时返回空数组
  header('Content-Type: application/json');
  echo json_encode([]);
  exit;
}
?>

3.2 获取对应年级的班级（get_classes.php） #

这个脚本接收Ajax传递的年级ID，查询对应班级数据并返回：

<?php
// 数据库连接配置（和上面一致，建议抽成单独的config.php文件复用）
$host = 'localhost';
$dbname = 'tu_base_de_datos';
$username = 'tu_usuario';
$password = 'tu_contraseña';

try {
  $pdo = new PDO(
    "mysql:host=$host;dbname=$dbname;charset=utf8",
    $username,
    $password,
    [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
  );

  // 验证参数是否存在
  if (!isset($_POST['grade_id']) || !is_numeric($_POST['grade_id'])) {
    echo json_encode([]);
    exit;
  }

  $gradeId = (int)$_POST['grade_id'];

  // 使用预处理语句防止SQL注入
  $stmt = $pdo->prepare("SELECT id, name FROM classes WHERE grade_id = :grade_id ORDER BY name ASC");
  $stmt->bindParam(':grade_id', $gradeId, PDO::PARAM_INT);
  $stmt->execute();

  $classes = $stmt->fetchAll(PDO::FETCH_ASSOC);

  header('Content-Type: application/json');
  echo json_encode($classes);
} catch(PDOException $e) {
  header('Content-Type: application/json');
  echo json_encode([]);
  exit;
}
?>

关键注意事项 #

• 数据库表结构：确保你的数据库中有grades（id, name）和classes（id, name, grade_id）两张表，字段对应脚本中的查询语句
• 安全问题：使用PDO预处理语句防止SQL注入，同时转义输出内容避免XSS攻击
• 依赖管理：如果使用jQuery，确保本地已下载对应的库文件，不要依赖外部CDN
• 错误处理：脚本中添加了基础的错误捕获，你可以根据需求扩展，比如返回具体错误信息给前端

内容的提问来源于stack exchange，提问作者Javier Sánche Buitrago