实时更新引导卡数据

Question

我用 Bootstrap 编写了一个仪表板来显示来自 MySQL 的数据

但是我需要在不刷新browser的情况下从select中实时显示这个div上的数据。所以我正在寻找一种方法来做到这一点

<div class="col-md-4">
    <div class="card text-white bg-dark mb-3" style="max-width: 100%;">
     <div class="card-header">Total Clientess / Ano</div>
        <div class="card-body" id="sombra">
            <h5 class="card-title" style="text-align:center;font-size: 40px;">

                <?php 
                
                  ## conecta no banco
                  include "conexao.php"; 

                  #da o comando sql no banco
                  $sql = "SELECT SUM(quantidade) AS total FROM clientes";

                  #Comando de consulta
                  $consulta = mysqli_query($conexao,$sql);

                  ## nao preciso de while pq ele vai pegar somente um valor, entao eu crio esse array
                  $dados = mysqli_fetch_array($consulta);
                 
                  #imprimo na tela o valor
                  echo $dados['total'];
                  
                 ?>
                 <span style="font-size: 20px">/ clientes</span>

            </h5>
  
        </div>
        
     </div>
  </div>

Answer 1

我使用 ajax 解决了这个问题。

创建 dataTelcadoAutoRefresh.php 文件并放置您的后端代码：

<?php 
                
                  ## conecta no banco
                  include "conexao.php"; 

                  #da o comando sql no banco
                  $sql = "SELECT SUM(quantidade) AS total FROM clientes";

                  #Comando de consulta
                  $consulta = mysqli_query($conexao,$sql);

                  ## nao preciso de while pq ele vai pegar somente um valor, entao eu crio esse array
                  $dados = mysqli_fetch_array($consulta);
                 
                  #imprimo na tela o valor
                  echo $dados['total'];
                  
                 ?>

更新了客户端：

<div class="container" id="output"></div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

并从客户端进行 ajax 调用：

<script>
    $(document).ready(function(){
        function getData(){
            $.ajax({
                type: 'POST',
                url: 'dataTelcadoAutoRefresh.php',
                success: function(data){
                    $('#output').html(data);
                }
            });
        }
        getData();
        setInterval(function () {
            getData(); 
        }, 1000);  // it will refresh your data every 1 sec

    });
</script>