PHP+AJAX实现下拉框联动：选课程后从数据库加载学期数据

嘿，作为PHP新手搞联动下拉框确实容易踩坑，我来帮你把这个课程-学期联动的逻辑理清楚，直接上可运行的修正代码，再给你讲关键要点~

1. HTML 结构 #

先写两个下拉框，课程框预先加载选项（可以从数据库查询生成，这里先写示例选项），学期框初始提示用户先选课程：

<div>
  <label for="course">选择课程:</label>
  <select id="course" name="course">
    <option value="">请选择课程</option>
    <option value="1">PHP基础入门</option>
    <option value="2">MySQL数据库实战</option>
    <option value="3">Vue.js前端框架</option>
  </select>
</div>
<div style="margin-top: 10px;">
  <label for="semester">选择学期:</label>
  <select id="semester" name="semester">
    <option value="">请先选择课程</option>
  </select>
</div>

2. AJAX 逻辑（原生JS） #

监听课程下拉框的change事件，一旦用户选了课程，就发请求到PHP后台拿对应的学期数据，然后动态渲染学期下拉框：

// 获取DOM元素
const courseSelect = document.getElementById('course');
const semesterSelect = document.getElementById('semester');

// 绑定change事件
courseSelect.addEventListener('change', function() {
  const selectedCourseId = this.value;

  // 如果没选课程，重置学期框
  if (!selectedCourseId) {
    semesterSelect.innerHTML = '<option value="">请先选择课程</option>';
    return;
  }

  // 创建AJAX请求
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `GETUSER1.php?course_id=${selectedCourseId}`, true);

  // 请求成功后的处理
  xhr.onload = function() {
    if (this.status === 200) {
      try {
        // 解析后台返回的JSON数据
        const semesters = JSON.parse(this.responseText);
        
        // 清空学期框，添加默认选项
        semesterSelect.innerHTML = '<option value="">请选择学期</option>';
        
        // 遍历学期数据，生成下拉选项
        semesters.forEach(semester => {
          const option = document.createElement('option');
          option.value = semester.id;
          option.textContent = semester.name;
          semesterSelect.appendChild(option);
        });
      } catch (err) {
        console.error('数据解析失败:', err);
        semesterSelect.innerHTML = '<option value="">加载失败，请重试</option>';
      }
    } else {
      semesterSelect.innerHTML = '<option value="">加载失败，请重试</option>';
    }
  };

  // 网络错误处理
  xhr.onerror = function() {
    semesterSelect.innerHTML = '<option value="">网络异常，请检查连接</option>';
  };

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

3. PHP 后台（GETUSER1.php） #

负责连接数据库，根据传过来的课程ID查询对应的学期，然后返回JSON格式的数据：

<?php
// 数据库配置（替换成你的实际信息）
$dbHost = 'localhost';
$dbUser = 'root';
$dbPass = 'your_password';
$dbName = 'your_database';

// 建立数据库连接
$conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);

// 检查连接是否成功
if ($conn->connect_error) {
  // 返回错误信息（JSON格式）
  die(json_encode(['error' => '数据库连接失败: ' . $conn->connect_error]));
}

// 获取前端传过来的课程ID，转成整数防止注入
$courseId = isset($_GET['course_id']) ? intval($_GET['course_id']) : 0;

// 如果课程ID无效，返回空数组
if ($courseId === 0) {
  die(json_encode([]));
}

// 预处理SQL语句，绝对不要直接把用户输入拼进SQL！
$stmt = $conn->prepare("SELECT id, semester_name FROM semesters WHERE course_id = ?");
// 绑定参数（i表示整数类型）
$stmt->bind_param("i", $courseId);
// 执行查询
$stmt->execute();
// 获取结果集
$result = $stmt->get_result();

// 把查询结果转成数组
$semesterList = [];
while ($row = $result->fetch_assoc()) {
  $semesterList[] = [
    'id' => $row['id'],
    'name' => $row['semester_name']
  ];
}

// 设置响应头为JSON格式
header('Content-Type: application/json');
// 输出JSON数据
echo json_encode($semesterList);

// 关闭资源
$stmt->close();
$conn->close();
?>

• SQL注入防护：一定要用预处理语句（prepare + bind_param），绝对不能直接把$_GET['course_id']拼进SQL里，这是新手最容易犯的安全错误！
• 数据格式：后台返回JSON比返回HTML片段更灵活，前端处理起来也更可控。
• 错误处理：要考虑各种异常情况（网络错误、数据库连接失败、数据解析失败），给用户明确的提示，避免页面卡住。
• DOM操作：动态生成选项时，记得先清空原来的选项，再添加新的，避免重复渲染。

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