AJAX 调用只调用一个下拉列表的数据，而不是两个下拉列表

Question

我是新手，还在学习 AJAX 调用，我不明白为什么我的 AJAX 调用只调用一个下拉列表的数据。好的，场景是我的表单中有 3 个下拉列表，分别是选择医生、显示咨询费和提供预约日期列表。我面临的问题是，当在doctor dropdown list 中选择医生时，AJAX 调用只会加载appointment date dropdown list 的数据。它没有加载咨询费。

这是我的医生代码、咨询费和预约日期下拉列表：

<div>
  <label>Select Doctor</label>
  <select name="doctor" id="get_doctor_name" onchange="getfee()" autocomplete="off" required>
    <option hidden value="">Select Doctor</option>
  </select>
</div>

<div>
  <label>Consultation Fee</label>
  <select name="fees" id="get_doctor_fee" autocomplete="off" readonly>
  </select>
</div>

<div>
  <label>Appointment Date</label>
  <select name="appdate" id="get_date">
  </select>
</div>

更新：这里是 AJAX 调用的脚本，函数 getfee() 和 getdate()：

<script>
      //function for fee details
      function getfee() 
      {
        $("#loaderIcon").show();
        jQuery.ajax(
        {
          url: "getfee.php",
          data: {doctor : $("#get_doctor_name").val()},
          type: "POST",
          success: function(data) 
          {
            $("#get_doctor_fee").html(data);
            $("#loaderIcon").hide();
          },
          error: function() {}
        });
      }

      //function for appointment date details
       function getdate() {
       $("#loaderIcon").show();
       jQuery.ajax({
       url: "getslot-date.php",
       data: {doctor : $("#get_doctor_name").val()},
       type: "POST",
       success: function(data) {
         $("#get_date").html(data);
        $("#loaderIcon").hide();
       },
       error: function() {}
    });
 }
    </script>

以下是 AJAX 调用脚本中getfee.php 中的代码：

<?php
include('incl/connection.php');
if(!empty($_POST['doctor'])) 
{
    $doctor =$_POST['doctor'];

    $sql = "SELECT D_FEES FROM tbldoctor 
            WHERE D_ID=:doctor";

    $query = $dbh->prepare($sql);
    $query->bindParam(':doctor',$doctor,PDO::PARAM_STR);
    $query->execute();
    if (!$query->execute()) {
    print_r($query->errorInfo());
}
    $results=$query->fetchAll(PDO::FETCH_OBJ);
    $cnt=1;
    if($query->rowCount() > 0) 
    {
        foreach($results as $results) 
            { 
               echo '<option readonly value="'.htmlentities($results->D_FEES).'">'. htmlentities($results->D_FEES).'</option>';
            }
    }
    else
    {
       echo '<option value=""> No Doctor in this specilization</option>';
       echo "<script>$('#submit').prop('disabled',true);</script>"; 
    }
}
?>

以下是 AJAX 调用脚本中getslot-date.php 中的代码：

<?php
include('incl/connection.php');
if(!empty($_POST['doctor'])) 
{
    $doctor =$_POST['doctor'];
    $sql = "SELECT T_ID, T_DATE, T_TIME FROM tbltimeslot 
            WHERE D_ID=:doctor AND A_ID IS NULL";

    $query = $dbh->prepare($sql);
    $query->bindParam(':doctor',$doctor,PDO::PARAM_STR);
    $query->execute();
    if (!$query->execute()) {
    print_r($query->errorInfo());}
    $results=$query->fetchAll(PDO::FETCH_OBJ);
    $cnt=1;
    if($query->rowCount() > 0) 
    {
        foreach($results as $results) 
        {
            echo '<option value="'.htmlentities($results->T_ID).'">'.htmlentities($results->T_DATE).' @ '.htmlentities($results->T_TIME).'</option>';
        }
    }
    else
    {
       echo '<option value=""> No available date</option>';
       echo "<script>$('#submit').prop('disabled',true);</script>"; 
    }
}
?>

下面是tbldoctor和tbltimeslot的表格：

CREATE TABLE `tbldoctor` (
  `D_ID` int(11) NOT NULL,
  `D_SPECILIZATION` varchar(255) NOT NULL,
  `D_NAME` varchar(255) NOT NULL,
  `D_FEES` varchar(255) DEFAULT NULL
)

CREATE TABLE `tbltimeslot` (
  `T_ID` int(11) NOT NULL,
  `T_DATE` date NOT NULL,
  `T_TIME` time NOT NULL,
  `D_ID` int(11) NOT NULL,
  `A_ID` int(11) DEFAULT NULL
)

Answer 1

您应该将数据返回为 json，然后使用它

$results=$query->fetchAll(PDO::FETCH_OBJ);
// remove all code after it, and add the following line
echo json_encode($results);

在你的 ajax 渲染选项中像这样

function getfee() 
      {

        $.ajax(
        {
          url: "getfee.php",
          data: {doctor : $("#get_doctor_name").val()},
          type: "POST",
          beforeSend: function() {
          //start loader
             $("#loaderIcon").show();
          },
          error: function() {  // hide loader when error otherwise will stuck on your screen
          $("#loaderIcon").hide();}
          success: function(objJson) 
          {
            var data = $.parseJSON(objJson);
            console.log(data); // to view how it looks in console, array, empty or whatever
            $('#get_doctor_fee').empty();
            if(data.length > 0) {
              $.each(data, function(key, value) {
                $('#get_doctor_fee').append('<option value="'+ value.D_FEES+'">'+ value.D_FEES +'</option>');
              });
            } else {
                $('#get_doctor_fee').append('<option value="">No Doctor in this specilization </option>');
                $('#submit').prop('disabled',true);
            }
            $("#loaderIcon").hide();
          },
        });
      }

您可以对其他下拉菜单应用相同的调整，这只是一个示例，向您展示如何管理它。

您可以更改的另一件事是调用您的函数，这样函数可以更可定制并具有更多控制权。但它取决于您的喜好

$('#get_doctor_name').on('change', function() {
    // call your ajax here
      ...
      url: "getfee.php",
      data: {doctor : $(this).val()},
      type: "POST",
      ...
      // update get_doctor_fee here
})

$('#get_doctor_fee').on('change', function() {
    // call your ajax here
      ...
      url: "getslot-date.php",
      data: {doctor : $(this).val()},
      type: "POST",
      ... 
      // update get_date dropdown
})

Answer 2

你必须这样写数据

function getfee() {
       $("#loaderIcon").show();
       jQuery.ajax({
       url: "getslot-date.php",
       data: {doctor : $("#get_doctor_name").val()},
       type: "POST",
       success: function(data) {
         $("#get_date").html(data);
        $("#loaderIcon").hide();
       },
       error: function() {}
    });
 }