使用AJAX调用时POST变量为空的技术求助

你遇到的核心问题是混淆了AJAX异步请求和页面初始加载的PHP执行逻辑，加上对POST变量的作用范围理解有误，导致始终拿不到预期值。咱们一步步拆解解决：

问题根源 #

1. 页面加载时，PHP代码就已经执行完毕了——你在<select>里直接用$_POST["optionValue"]，但此时根本没有任何POST请求触发，这个变量自然是空的。
2. AJAX是独立于当前页面的异步HTTP请求，它发送的POST参数只会被doctordetails.php接收，不会影响当前页面的$_POST变量。

修正后的完整实现 #

我们需要让AJAX请求后端获取对应日期的时段数据，再动态更新前端的下拉选项，而不是试图直接用当前页面的$_POST。

1. 后端处理（doctordetails.php）

<?php
require_once("dblogin.php");

// 接收AJAX传来的选中日期
if (isset($_POST['booking_date'])) {
    $selectedDate = $_POST['booking_date'];
    
    // 用预处理语句查询对应时段（防SQL注入！）
    $sql = "SELECT slot_id, slot_time FROM slots WHERE booking_date = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("s", $selectedDate);
    $stmt->execute();
    $result = $stmt->get_result();
    
    // 组装下拉选项的HTML
    $options = '<option value="">Select slot</option>';
    while ($row = $result->fetch_assoc()) {
        $options .= "<option value='{$row['slot_id']}'>{$row['slot_time']}</option>";
    }
    
    // 返回组装好的选项给前端
    echo $options;
    exit;
}
?>

2. 前端HTML修改

给下拉框加个ID，方便JS操作：

<div class="row">
    <div class="col-6">
        <div class="form-group">
            <input class="form-control" type="text" id="booking_date" name="booking_date" data-lang="en" data-min-year="2017" data-max-year="2020" data-disabled-days="10/17/2017,11/18/2017">
        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <select class="form-control" id="slot_select">
                <option value="">Select slot</option>
            </select>
        </div>
    </div>
</div>

3. 前端AJAX修改

在日期变化时，发送请求并动态更新下拉选项：

<script>
$(document).ready(function(){
    $("#booking_date").change(function(){ 
        var selectedDate = $(this).val();
        // 确保日期不为空再发送请求
        if (!selectedDate) return;
        
        $.ajax({
            url: "doctordetails.php", 
            data: { booking_date: selectedDate }, // 键名更清晰，和后端对应
            type: "POST",
            success: function(response) {
                // 把后端返回的选项插入到下拉框里
                $("#slot_select").html(response);
                console.log("已发送日期：" + selectedDate);
            },
            error: function(xhr, status, error) {
                // 调试用：打印错误信息
                console.error("AJAX请求出错：" + error);
            }
        });
    });
});
</script>

关键注意事项 #

• 永远用预处理语句处理SQL查询，避免注入风险。
• AJAX的success回调是处理后端返回数据的唯一入口，不要试图在页面加载时直接用AJAX的POST参数。
• 确保你输入的日期格式和数据库中存储的格式一致，否则会出现查询不到数据的情况。

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