Php 如何加上「；“装载”；消息进入引导模式，直到从数据库获取数据

我使用引导模式来显示从数据库中获取的数据。我有这段代码用于将远程PHP数据加载到引导模式中。这是工作。但在从数据库获取数据之前，我需要将加载消息添加到模式中。我有这段代码用于将远程PHP数据加载到引导模式框中

index.html

<script>        
     $(document).ready(function(){
         $('#myModal').on('show.bs.modal', function (e) {               
             var rowid = $(e.relatedTarget).data('id');
             $.ajax({
                 type : 'post',
                 url : 'fetch_subjects.php', //Here you will fetch records
                 data :  'rowid='+ rowid, //Pass $id
                 success : function(data){
                 $('.fetched-data').html(data);//Show fetched data from database
                 }
             });
          });
     });
    
     </script>


 <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Subjects</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="fetched-data"> </div> <!--fetched dates here -->
        </div>
        <div class="modal-footer">
          <button type="butZton" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>    
    </div>
  </div>

$（文档）.ready（函数（）{
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
var rowid=$（e.relatedTarget）.data（'id'）；
$.ajax({
键入：“post”，
url:'fetch_subjects.php'，//您将在这里获取记录
数据：“rowid=”+rowid，//传递$id
成功：功能（数据）{
$（'.fetched data'）.html（data）；//显示从数据库中提取的数据
}
});
});
});
学科
&时代；
接近

fetch_subjects.php

<?php
    require 'db_connection.php';
    if($_POST['rowid']) {
        $id = $_POST['rowid'];
        $sql = "SELECT * FROM subject where year=$id";
                  $result = $conn->query($sql);        
                  if ($result->num_rows > 0) {
                    while($row = $result->fetch_assoc()) {
                        echo "<div class='list-group'>
                        <b>
                        <a href='notes?id=". $row['id'] ."' class='list-group-item list-group-item-action' target='_blank'>
                        " . $row["name"]. "
                        </a>
                        </b>
                        </div>
                        </button>";
                    }
                  }
    
                  else {
                    echo "no details.";
                  }        
     }
    ?>

---

我会这样做：

$.ajax({
      type : 'post',
      url : 'fetch_subjects.php', //Here you will fetch records
      data :  'rowid='+ rowid, //Pass $id
      success : function(data){
          $('.fetched-data').html(data);//Show fetched data from database
      },
      beforeSend: function() {
         $('#loader').show(); // Assuming that you have some loader defined
      },
      complete: function(){
         $('#loader').hide(); //Hide this loader
      },
});


$（文档）.ready（函数（）{
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
var rowid=$（e.relatedTarget）.data（'id'）；
$.ajax({
键入：“post”，
url:'fetch_subjects.php'，//您将在这里获取记录
数据：“rowid=”+rowid，//传递$id
beforeSend:function（）{
$（'.loader'）.show（）；//假设定义了一些加载器
},
成功：功能（数据）{
$（'.fetched data'）.html（data）；//显示从数据库中提取的数据
$（'.loader'）.hide（）；
},
});
});
});
学科
&时代；
加载。。。。。。。。。。。。。
接近

 <script>

     $(document).ready(function(){
         $('#myModal').on('show.bs.modal', function (e) {

             var rowid = $(e.relatedTarget).data('id');
             $.ajax({
                 type : 'post',
                 url : 'fetch_subjects.php', //Here you will fetch records
                 data :  'rowid='+ rowid, //Pass $id
                 beforeSend: function() {
                    $('.loader').show(); // Assuming that you have some loader defined
                 },
                 success : function(data){
                 $('.fetched-data').html(data);//Show fetched data from database
                 $('.loader').hide();
                 },
             });
          });
     });

     </script>

 <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Subjects</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
          <!-- loader -->
          <div class="loader">
            loading.............
          </div>

            <div class="fetched-data"> </div> <!--fetched dates here -->
        </div>
        <div class="modal-footer">
          <button type="butZton" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>