如何用JavaScript根据数据库同值预约计数隐藏特定时段选项

你当前写的前端JS中直接操作MySQL的代码是Node.js服务端语法，无法在浏览器环境运行，需要通过「前端传选中日期给PHP接口→PHP查询数据库返回满额时段→前端隐藏对应时段选项」的逻辑实现需求，具体代码修改如下： #

1. 新建PHP后端接口（get_blocked_time.php） #

<?php
// 数据库连接配置，改成你自己的实际配置
$host = 'LOCALHOST';
$user = 'root';
$password = '';
$database = 'data';
$conn = new mysqli($host, $user, $password, $database);
if ($conn->connect_error) {
    die(json_encode(['code' => 1, 'msg' => '数据库连接失败']));
}
// 接收前端传的日期参数
$selectDate = $_POST['select_date'] ?? '';
if (empty($selectDate)) {
    die(json_encode(['code' => 1, 'msg' => '日期参数为空']));
}
// 预处理查询防止SQL注入，统计每个时段的预约数
$blockedTimes = [];
$maxCount = 5; // 单时段最大预约数，可自行调整
$stmt = $conn->prepare("SELECT time, COUNT(*) as count FROM tbl_reservations WHERE date = ? GROUP BY time HAVING count >= ?");
$stmt->bind_param("si", $selectDate, $maxCount);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
    $blockedTimes[] = $row['time']; // 把满额的时段存入数组
}
$stmt->close();
$conn->close();
// 返回满额时段数据
echo json_encode(['code' => 0, 'data' => $blockedTimes]);
?>

2. 替换前端原有代码 #

删掉你之前写的那段操作MySQL的JS代码，替换剩余的JS和表单部分为以下内容：

<div class="form-field col-lg-6 ">
    <div class='input-group date' id='datetimepicker1'>
        <span class="input-group-addon">
            <input type='text' class="form-control input-text js-input" id="date" name="date" onchange="return getDate()"/>
        </span>
    </div>
    <label class="label" for="date"></label>
</div>
<div class="form-field col-lg-6">
    <select id="time" style="color:rgb(255,255,255,0.8)" class="input-text js-input" required>
        <option style="display:none" selected>Time</option>
        <option class="time-option" value="16">16:00</option>
        <option class="time-option" value="17">17:00</option>
        <option class="time-option" value="18">18:00</option>
        <option class="time-option" value="19">19:00</option>
        <option class="time-option" value="20">20:00</option>
        <option class="time-option" value="21">21:00</option>
    </select>
</div>
<script>
function getDate(){
    // 获取用户选中的日期
    var selectDate = document.getElementById('date').value;
    if(!selectDate) return;
    // 先重置所有时段为可见状态
    document.querySelectorAll('.time-option').forEach(option => {
        option.style.display = 'block';
    });
    // 发送AJAX请求给PHP接口拿满额时段，复用你之前引入的jQuery依赖
    $.ajax({
        url: 'get_blocked_time.php', // 对应你刚才新建的PHP文件的实际路径
        type: 'POST',
        data: {select_date: selectDate},
        dataType: 'json',
        success: function(res){
            if(res.code !== 0) return;
            // 隐藏满额的时段
            res.data.forEach(blockedTime => {
                document.querySelector('.time-option[value="'+blockedTime+'"]').style.display = 'none';
            });
            // 自动选中第一个可见的时段
            var firstAvailable = document.querySelector('.time-option:not([style*="display: none"])');
            if(firstAvailable) firstAvailable.selected = true;
        }
    })
}
</script>

注意事项 #

• 如果你用的是第三方日期选择组件，也可以把触发事件绑定到组件的日期选择回调上，效果一致
• 后续如果要调整单时段最大预约数，直接修改PHP文件里的$maxCount参数即可

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