在 AJAX/JQUERY 中获取查询结果，然后在 SELECT 选项中显示

Question

我想从 ajax 获取查询结果并将其显示在id="reservation_time"的SELECT OPTION中

我认为我的 ajax/jquery 调用是错误的，但我不知道使用 ajax/jquery 获取数据的正确语法是什么。 我在 check_date.php 中的sql语句正在工作

逻辑是这样的， SELECT OPTION是隐藏的，直到用户选择一个日期，然后它将在SELECT OPTION中显示该特定日期的可用时间

预订.PHP(HTML)

<form action="check_temp_res.php" method="post">
            <div class="" style="width:100%;">
                <div class="form-group">
                    <input type="text" class="form-control" id="name" name="temp_res_name" placeholder="Name" value="" required>
                    <input type="text" name="temp_res_number" class="form-control "onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="11" value="" placeholder="Phone Number"required></input>
                    <input type="text" class="form-control" id="datepicker" name="temp_res_date" placeholder="Date" value="" readonly required>

                 <select  id="reservation_time" name="reservation_time" class="form-control " required>
                        <option selected="true" value="null"disabled="disabled">TIME</option>
                        <option value=""></option>
                 </select>

                    <span id="availability" class="ftco-animate"></span>
                </div>
            </div>
             <div style="text-align: center">
                <div style="display:inline-block;">
                    <input type="checkbox" id="check" value="newsletter" disabled>
                    <label for="check">I accept the Terms and Conditions</label>
                </div>
            </div>
            <button type="submit" name="submit" class="btn btn-primary button pull-left" style="" id="submit">I Understand</button>
</form>

AJAX/JQUERY CALL（同一个文件）

<script>
    $("#reservation_time").blur(function()
    {    

        var txt = $.ajax(
            {
                url: '../api/ajax/check_date.php',
                async: true,
                type:'POST',
                data:
                {
                   res_date:$('input#datepicker').val()
                } ,
                success:function(data)
                {
                    alert(data); 
                }
            });
        });
    </script>

check_date.php

<?php
include '../../components/db.php';

$res_date = $_POST['res_date'];

 $query = "select t.reservation_time
from TIME_AVAILABILITY t
  left join (
    select reservation_time, reservation_date
    from RESERVATIONS
    where reservation_date = 'November 05, 2019'
  ) as q
  on t.reservation_time = q.reservation_time
where q.reservation_date is null; ";
 $result = mysqli_query($conn, $query);
 echo mysqli_num_rows($result);


?>

Answer 1

您的脚本缺少一些组件。

PHP 代码将正确的查询发送到数据库，但它不消耗来自数据库的响应。 此外，它不会将信息转发给 JavaScript 以供进一步使用。

$result = mysqli_query($conn, $query);
$timeslots=array();
while ($myrow=mysqli_fetch_assoc($result)){
  $timeslot=$myrow['reservation_time'];

  array_push($timeslots,$timeslot);


}

echo json_encode($timeslots);

然后在 JavaScript 中输入“alert”，解析数据：

var timeslots=eval('('+data+')');

这将为您提供时隙列表的 JavaScript 数组。 接下来，您将修改 DOM 节点，以便下拉菜单包含结果。 在 select object 内部填充有点棘手。 您可以使用 document.createElement('option') 或 use.innerHTML 从外部清除 select object。 我会告诉你后者：

<div id="select_loader">
  <select id="reservation_time">...</select>
</div>

...
success:function(data){
  var timeslots=eval('('+data+')');
  var html=[];
  html.push('<select id="reservation_time">');
  for (var i=0;i<timeslots.length;i++) html.push(
    '<option value="'+timeslots[i]+'">'+timeslots[i]+'</option>');
  html.push('</select>');
  document.getElementById('select_loader').innerHTML=html.join('');
}