PHP Ajax下拉框联动报错：Undefined array key及无法填充问题求助

遇到的两个问题 #

• 触发警告：Warning: Undefined array key "officeId" in C:\xampp\htdocs\scheduler\classes\Setting.php
• assemblyid下拉框无法被填充，虽然浏览器网络面板显示数据已经加载完成

相关代码 #

index页面代码 #

<select class="custom-select" name="o_id" id="officeid" >
    <option value="0"></option>
    <?php  
    $hall_qry = $conn->query("SELECT * FROM `office_hall` WHERE o_id !=0  order by `office_name` asc");
            while($row = $hall_qry->fetch_assoc()): ?>
            <option value="<?php echo $row['o_id'] ?>"><?php echo $row['office_name'] ?></option> 
            <?php
            endwhile; 
            ?>
</select>
<br><br>
<select class="custom-select" name="assemblyid" id="assemblyid"> 
   <option value = ""></option>             
</select>

<script>
$(document).ready(function(){
    $('#officeid').change(function(){
        var officeid = $(this).val();
            $.ajax({
            url:_base_url_+"classes/Setting.php",
            method:"POST",
            data:{officeId:officeid},
            dataType:"text",
            success:function(data)
                {
                $('assemblyid').html(data);
                }
            });
    });
});
</script>

Setting.php代码 #

<?php
require_once('../config.php');

$hall_qry = $conn->query("SELECT * FROM assembly_hall WHERE o_id = '".$_POST['officeId']."'");
while($row = $hall_qry->fetch_assoc()): ?>
    
        <option value="<?php echo $row['id'] ?>"><?php echo $row['room_name'] ?></option>
        
        <?php
 endwhile; 
        ?>

问题解决方法 #

1. 消除Undefined array key警告 #

直接访问$_POST['officeId']会在参数未传入时触发警告，同时原代码存在SQL注入风险，修复后的Setting.php如下：

<?php
require_once('../config.php');

// 先判断参数是否存在，不存在则设为0
$officeId = isset($_POST['officeId']) ? $_POST['officeId'] : 0;
// 使用预处理语句防止SQL注入，更安全
$stmt = $conn->prepare("SELECT * FROM assembly_hall WHERE o_id = ?");
$stmt->bind_param("i", $officeId);
$stmt->execute();
$result = $stmt->get_result();

while($row = $result->fetch_assoc()): ?>
    <option value="<?php echo $row['id'] ?>"><?php echo $row['room_name'] ?></option>
<?php endwhile; 
// 关闭语句释放资源
$stmt->close();
?>

2. 修复下拉框无法填充问题 #

原JS代码中选择器错误，$('assemblyid')没有指定ID选择器前缀#，导致无法定位到目标下拉框，修复后的JS代码：

$(document).ready(function(){
    $('#officeid').change(function(){
        var officeid = $(this).val();
        // 当选择值为0时，清空下拉框避免旧数据残留
        if(officeid == 0){
            $('#assemblyid').html('<option value=""></option>');
            return;
        }
        $.ajax({
            url:_base_url_+"classes/Setting.php",
            method:"POST",
            data:{officeId:officeid},
            dataType:"text",
            success:function(data)
            {
                // 修正为ID选择器
                $('#assemblyid').html(data);
            }
        });
    });
});

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