從 mysql 表 ajax 檢索數據

Question

我有一個日期類型的輸入字段，並且有一個包含日期數據的數據庫。 我需要在不刷新頁面的情況下在日期字段中選擇日期時，將顯示與該日期關聯的所有數據。 我有這段代碼，當從列表中選擇一個選項時，它將顯示我需要的內容。 如何修復此腳本，以便在日期類型字段中選擇日期時，它將日期發送到服務器

 <input type="date" class="form-control" name="date_sched" value="" required>
<span id="skidka"></span> 

<script type="text/javascript">
$(document).ready(function() {
    $('#category').change(function () {
        var category = $(this).find(':selected').val();
        $.ajax({
            url:_base_url_+"admin/appointments/get_cat.php",
            type: 'POST',
            data: {category: category},
            success: (function (data) {
                 $("#date_field").html(data);
            })
        });         
    });
});

獲取-cat.php

    $query = "SELECT * FROM `appointments` WHERE `id` = '".($_POST['category'])."'";
$result = $mysqli->query($query);

$data = '';
foreach ($result as $value){
    $data .= $value['date_sched'];
} 
echo $data;

?>

Answer 1

要使用 Ajax + jQuery 檢索數據，您應該編寫以下代碼：

創建一個 id="showData" 的 HTML 按鈕。 Ajax 腳本將在單擊此按鈕時執行。

后端腳本.php

<?php

include("database.php");
$db=$conn;
// fetch query
function fetch_data(){
 global $db;
  $query="SELECT * from usertable ORDER BY id DESC";
  $exec=mysqli_query($db, $query);
  if(mysqli_num_rows($exec)>0){
    $row= mysqli_fetch_all($exec, MYSQLI_ASSOC);
    return $row;  
        
  }else{
    return $row=[];
  }
}
$fetchData= fetch_data();
show_data($fetchData);

function show_data($fetchData){
 echo '<table border="1">
        <tr>
            <th>S.N</th>
            <th>Full Name</th>
            <th>Email Address</th>
            <th>City</th>
            <th>Country</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>';

 if(count($fetchData)>0){
      $sn=1;
      foreach($fetchData as $data){ 

  echo "<tr>
          <td>".$sn."</td>
          <td>".$data['fullName']."</td>
          <td>".$data['emailAddress']."</td>
          <td>".$data['city']."</td>
          <td>".$data['country']."</td>
          <td><a href='crud-form.php?edit=".$data['id']."'>Edit</a></td>
          <td><a href='crud-form.php?delete=".$data['id']."'>Delete</a></td>
   </tr>";
       
  $sn++; 
     }
}else{
     
  echo "<tr>
        <td colspan='7'>No Data Found</td>
       </tr>"; 
}
  echo "</table>";
}

?>

ajax-script.js

$(document).on('click','#showData',function(e){
      $.ajax({    
        type: "GET",
        url: "backend-script.php",             
        dataType: "html",                  
        success: function(data){                    
            $("#table-container").html(data); 
           
        }
    });
});

Answer 2

您需要這樣做，以便當您的日期更改時，您可以根據該日期獲取數據：

 <input type="date" class="form-control" name="date_sched" id='date_sched' required>

 <script type='text/javascript'>
   $(document).ready(function(){
     $(document).on('change', '#date_sched', function(){
       let date = $(this).val();

       $.ajax({
         url:_base_url_+"admin/appointments/get_cat.php",
         type: 'POST',
         data: {date: date},
         success: function (data) {
             $("#data_to_be_shown").html(data);
         );
       });
     });
   });
 </script>

然后，您的查詢應如下所示：

$date = $_POST['date'];

$sql = "SELECT * FROM `table_name` WHERE `date` = $date";
$stmt = $connection->query($sql);

另外，我建議您查看准備好的陳述。

Answer 3

我不確定你想要什么，你的意思是帶有日期過濾器的服務器端表嗎？ 如果是，我認為這將有所幫助： https://datatables.net/examples/data_sources/server_side您可以閱讀文檔以了解高級服裝日期范圍過濾器或您自己的過濾器