实时更新引导卡数据

Posted 2023-03-22

【中文标题】实时更新引导卡数据

【英文标题】：Update Bootstrap Card Data realtime

【发布时间】：2021-03-02 04:03:04

【问题描述】：

我用 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>

【参考方案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>