양식없이 div에서 페이지를 다시로드하지 않고 데이터베이스에서 얻는 방법은 무엇입니까?

Question

나는 순진하지만 게이지가 들어있는 div에 데이터를 가져 오는 데 현재 직면하고 있습니다. 데이터베이스의 값이 업데이트됨에 따라 게이지의 값을 동적으로 변경하고 싶습니다. Google에서 검색 한 대부분의 답변을 알고 있으며 다른 일부는 주로 아약스와 관련이 있습니다. 이전에 아약스를 사용했지만 양식을 사용하여 아약스를 활성화하고 데이터가 양식을 통과하고있었습니다.하지만 최근의 상황에서는 데이터가 하드웨어에서 제공되지 않습니다. 이제 전체 페이지를로드하지 않고 해당 데이터를 게이지에 동적으로로드해야합니다 //

다음은 내가 새로 고치려는 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> 

나는 코드가 어떤 아약스가 .. 그러나 나는 아약스에 대한이 이전 코드입니다 ...

$(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() 타이머 기능입니다 쿠마 게이지 및을 heres 코드입니다. setinterval()에 아약스를 넣고 시간에 호출하면 데이터베이스에서 데이터를 다시 검색합니다. 당신은 그 데이터가 새로운 것인지 확인해야합니다. 새로운 것이면 div를 업데이트 할 것입니다. 그것이 효과가 있다고 생각하십시오. 아래 간격의 exapmle

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