フォームを使わずにdivのページを再読み込みせずにデータベースから取得する方法は？

Question

私は素朴かもしれませんが、現在、ゲージを含むdivにデータをフェッチする際に問題に直面しています。データベースの値が更新されると、ゲージの値を動的に変更したいと思います.Googleで検索した回答のほとんどは知っていて、その他はほとんどがajaxに関連していました。以前はajaxを使用していましたが、フォームを使用してajaxをアクティブ化し、データがフォームを通過していましたが、最近の状況では、データはハードウェアからのものではありません。今度は、ページ全体を読み込まずにゲージにデータをロードする必要があります//

ここでは、更新したいdivのコードを示します。

<div class="col-md-3" id="guage-bar">  
     <section class="panel" > 
      <header class="panel-heading"> 
      <?php echo $row['name']; ?><span class="tools pull-right"> 
      <a href="detail_report.php?name=<?php echo htmlentities($row['name']);?>&selected=3" class="fa fa-bar-chart-o"></a> 
      </header> 
      <div class="panel-body" style="height : 245px;" > 
      <div class="top-stats-panel"> 
        <div class="gauge-canvas text-center"> 
         <div class="js-gauge <?php echo $row['pulse_id']; ?> gauge"></div> 
         <span class="unit"><?php echo $row['unit_ph']; ?></span> 
        </div> 
        <ul class="gauge-meta clearfix"> 
         <li id="gauge-textfield" class="pull-left gauge-value"></li> 

        </ul> 
       </div> 
      </div> 

     </section> 
    </div> 

私は、コードの任意のAJAXを..を持っている。しかし、これは、私はアヤックスのために持っている、以前のコードです...

$(function save() { 

     $('#hour_form').on('submit', function (e) { 

      e.preventDefault(); 

      $.ajax({ 
      type: 'get', 
      url: 'hourly_detail.php', 
      data: $('#hour_form').serialize(), 
      }); 

     }); 

     }); 

ここで私は、時間のフォームからデータを取得しましたが、私の現在の状態では私が持っていますデータがゲージにフェッチされるget_pulse_data.php。私が使用しているゲージは...

<?php 
include "connection.php"; 
include "session_data.php"; 

$sql = "SELECT * FROM data_current where device_key = '" . $session_row["device_key"] . "' "; 

$result = $conn->query($sql); 

if ($result->num_rows > 0) { 
    // output data of each row 
    while($row = $result->fetch_assoc()) { 
     $pulse_data1 = $row['pulse1']; 
    } 
} 
    $min_max = "SELECT * FROM pulse_setting where pulse_id='pulse1' and device_key = '" . $session_row["device_key"] . "' "; 
    $value = $conn->query($min_max); 


    // output data of each row 
    while($val= $value->fetch_assoc()) { 
     $min = $val['min_pulse']; 
     $max = $val['max_pulse']; 
     $unit = $val['unit_ph']; 
?> 
<script> 

      $('.pulse1').kumaGauge({ 

       value : <?php echo $pulse_data1 ?>, 
     radius : 100, 

     // The padding on the top and bottom of the gauge 
     paddingX : 40, 

     // The padding on the left and right of the gauge 
     paddingY : 40, 

     // The width of the gauge itseld 
     gaugeWidth : 50, 

     // The fill of the gauge, this can be a solid color or a gradient 
     fill : '0-#5B90F6:25-#2E37FE:55-#0000EE:85-#000080:100', 

     // The fill of the gauge background, this can be a solid color or a gradient 
     gaugeBackground : '#EDEDED', 

     // The fill of the canvas, this can be a solid color or a gradient 
     background : '#000', 

     // Show or hide the needle, 
     // if true the value label shows half of the range 
     // if false the value label shows the value 
     showNeedle : false, 

     // The speed of the animation in miliseconds 
     animationSpeed : 500, 

     // The minimum value of the gauge 
     min : <?php echo $min ?>, 

     // The maximum value of the gauge 
     max : <?php echo $max ?>, 


     // The label that indicates the value 
     valueLabel : { 

      // show or hide this label 
      display : true, 

      // The font family of this label 
      fontFamily : 'Arial', 

      // The font color of this label 
      fontColor : '#ddd', 

      // Integer of The font size of this label (without px) 
      fontSize : 20, 

      // The font weight of this label 
      fontWeight : 'bold' 
     }, 

     title : { 

      // show or hide this label 
      display : false, 

      // String the value of the title 
      value : 'pulseerature 1', 

      // The font family of this label 
      fontFamily : 'Arial', 

      // The font color of this label 
     fontColor : '#ddd', 

      // Integer of The font size of this label (without px) 
      fontSize : 20, 

      // The font weight of this label 
      fontWeight : 'bold' 
     }, 
     label : { 

      // show or hide this label 
      display : true, 

      // The value of the left (minimum) label 
      left : <?php echo $min ?>, 

      // The value of the right (maximum) label 
      right : <?php echo $max ?>, 

      // The font family of this label 
      fontFamily : 'Arial', 

      // The font color of this label 
      fontColor : '#ccc', 

      // Integer of The font size of this label (without px) 
      fontSize : 10, 

      // The font weight of this label 
      fontWeight : 'normal' 
     } 


     }); 

?> 

あなたの懸念に感謝

Answer 1

たsetInterval（）タイマー機能でくまゲージと相続人のコードです。あなたがsetinterval（）にあなたのajaxを置き、あなたの時間にそれを呼び出すと、データベースからデータを取得します。あなたはちょうどそれらのデータが新しいことを確認する必要があります。新しい場合は、あなたのdivを更新します。それが動作すると思う。以下の例のようになります。

function testFunction() {//your function } 
setInterval(testFunction, 5000);