AJAX 調用只調用一個下拉列表的數據，而不是兩個下拉列表

Question

我是新手，仍在學習 AJAX 調用，我不明白為什么我的 AJAX 調用只調用一個下拉列表的數據。 好的，場景是我的表單中有 3 個下拉列表，用於選擇醫生、顯示咨詢費用和提供預約日期列表。 我面臨的問題是，當在doctor dropdown list選擇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>

更新：以下是帶有函數getfee()和getdate()的 AJAX 調用腳本：

<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() {}
    });
 }