使用PHP+AJAX实现HTML下拉框二级联动的问题求助

现有代码存在的问题 #

1. 前端AJAX逻辑错误 #

• 参数传递错误：调用dynSelect时传入的是下拉框元素ID，不是选中值；且AJAX传参时把变量i写成了字符串'i'，后端拿到的永远是固定字符i而非选中的线路值
• URL拼写错误：url: "ajax.php."末尾多了多余的点，会导致请求404
• 未指定返回数据类型：后端返回的是JSON字符串，前端没有加dataType: 'json'配置，无法自动解析为可操作的数组对象
• 循环逻辑错误：用while(data.length)会造成死循环，只要数组长度不为0就会无限执行；创建下拉选项的标签名拼写错误，是<option>不是<options>
• 未清空旧选项：每次切换第一个下拉框选中值时，没有清空第二个下拉框的原有内容，会导致选项累加

2. 后端PHP代码错误 #

• 存在SQL注入风险：使用PDO预处理却直接拼接变量到SQL语句，完全没有用到预处理的安全特性；且line字段是字符串类型，直接拼接没有加引号会触发SQL语法错误
• 未指定返回格式头：没有声明返回内容为JSON，前端可能会把返回值识别为普通文本无法正常解析
• 缺少错误捕获逻辑：PDO连接、SQL执行阶段没有异常捕获，出问题后无法快速定位错误点
• 未指定数据库编码：查询结果如果包含中文会出现乱码

修复后的代码 #

修正后的AJAX函数 #

function dynSelect(selectId){
  // 获取第一个下拉框的实际选中值
  const selectedLine = $("#" + selectId).val();
  // 清空第二个下拉框原有选项
  $("#scannertime").empty();
  $.ajax({
    type: 'post',
    url: "ajax.php",
    data: { id: selectedLine },
    dataType: 'json', // 自动解析返回的JSON为数组对象
    // 错误回调用于调试请求异常
    error: function(xhr, err) {
      console.log("请求异常：", err);
    }
  }).done(function(data) {
    // 遍历返回的数组生成选项
    data.forEach(item => {
      const temp = item.scanner;
      $("#scannertime").append($("<option>").text(temp).val(temp));
    })
  });
}

修正后的PHP代码 #

<?php
// 声明返回内容为JSON格式
header('Content-Type: application/json; charset=utf-8');
$id = $_REQUEST['id'];
$json = [];

try {
    $dsn = "mysql:dbname=faultcounter; host=127.0.0.1;charset=utf8mb4";
    $user = "root";
    $password = "";
    // 开启PDO异常模式，方便捕获错误
    $dbh = new PDO($dsn, $user, $password, [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
    ]);
    // 使用参数绑定，避免SQL注入和语法错误
    $stmt = $dbh->prepare("SELECT * FROM possiblefaults WHERE line = ?");
    $stmt->execute([$id]);
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $json[] = $row;
    }
} catch (Exception $e) {
    // 错误信息放入返回值，方便前端调试
    $json['error'] = $e->getMessage();
}

echo json_encode($json);
?>

通用调试方法 #

• 前端调试：按F12打开浏览器开发者工具，切换到「网络」标签，触发下拉框change事件，查看AJAX请求的传参、返回内容是否符合预期；切换到「控制台」标签查看是否有JS报错
• 后端调试：直接在浏览器访问ajax.php?id=L411（替换为实际线路值），查看返回的内容是否是合法JSON格式，是否有PHP报错提示
• 数据库调试：把要执行的SQL语句复制到数据库客户端执行，确认是否能返回预期的scanner字段数据

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