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>

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

    });

 }