使用 AJAX 调用时 POST 变量为空

Question

我正在尝试POST 使用AJAX call 在下拉列表中选择的值。但是当从下拉列表中选择值时，POST 变量保持空白。

我使用ECHO method 来检查它是否返回POST 值。但它是空的。

下面是代码供参考：

Javascript（Jquery 和 Ajax）：

<script>
$(document).ready(function(){
    $("#booking_date").change(function(){ //listen when the option change   
        var optionValue = $("#booking_date").val();  //get the new value

        $.ajax({
            url: "doctordetails.php", //php file which recive the new value and save it to the database
            data: { optionValue: optionValue },  //send the new value
            type: "POST"  ,                  //use POST method
            success: function(data) {
                console.log(optionValue);
            }
        });
    });
});
</script>   

HTML：

<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">
        <option value="">Select slot</option>>
        <?php
            require_once("dblogin.php");
        ?>
        <option value="<?php echo $_POST[" optionValue "]; ?>">
          <?php echo $_POST["optionValue"]; ?>
        </option>
      </select>
    </div>
  </div>
</div>

预期结果：

$_POST 应该从 booking_date 返回选定的值，$_POST 值将用于 SQL 查询。

Answer 1

如果这是下拉列表，则 id 必须在选择框上。您在选择框以外的文本框上设置了 id booking_date。写成：

<select id="booking_date" class="form-control"> </select>

Answer 2

如果你想从 select(dropdown) 中取值，那么你必须在 <select> 而不是文本框 <input> 上设置 id

   <select id="booking_date" class="form-control">
      <option value="">Select slot</option>>
      <?php require_once("dblogin.php"); ?>
      <option value="<?php echo $_POST["optionValue"]; ?>">
            <?php echo $_POST["optionValue"]; ?>
      </option>

   </select>

关于脚本：

<script>
$(document).ready(function(){
    $("#booking_date").change(function(){ //listen when the option change   
        var optionValue = $(this).val();  //get the new value

        $.ajax({
            url: "doctordetails.php", //php file which recive the new value and save it to the database
            data: { getValue: optionValue },  //send the new value
            type: "POST"  ,                  //use POST method
            success: function(data) {
                console.log(data);
            }
        });
    });
});
</script>