2017-12-26 5 views
0

私はPHPで質問したいと思います。私は計画を立て、その上で価値観を変えたいと思っています。 イメージを置いて、いくつかのデータを置いています。私はこの値を自動更新したい。php自動更新HTMLのデータ

<div class="container"> 
    <img src="ahol.PNG" alt="Norway" style="width:100%;"> 
    <div class="data1">$data1 kWh </div> 
<div class="data2">$data2 kWh </div> 
    <div class="data3">$data3 kWh </div> 
<div class="data4">$data4 kWh </div> 
</div> 

これは私の同じデータファイルのコードです。

$servername = "localhost"; 
$username = ""; 
$password = ""; 
$dbname = ""; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$sql = "SELECT * FROM makinebilgi"; 
$result = $conn->query($sql); 

if ($result->num_rows > 0) { 
    // output data of each row 
    while($row = $result->fetch_assoc()) {  
     $data1 =$row["data1"]; 
     $data2= $row["data2"]; 
     $data3= $row["data3"]; 
     $data4= $row["data4"]; 
    } 
} else { 
    echo "0 results"; 
} 
$conn->close(); 

私はエネルギーシステムの時計を使いたいこのページ。私は毎秒データベースにエネルギー値を追加しています。私はページだけではないデータだけを自動リフレッシュしたい。

+4

あなたはそれにajaxを使用する必要があります。 –

+0

ajaxの使い方についてこのリンクを確認してください。https://www.w3schools.com/php/php_ajax_php.asp – kranthi

+0

@AhsanAliあなたはそれに似ていますか? –

答えて

1

これはajaxを使用して実現できます。

data.phpファイルを作成し、バックエンドのコードを配置:

<?php 

$servername = "localhost"; 
$username = ""; 
$password = ""; 
$dbname = ""; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$sql = "SELECT * FROM makinebilgi"; 
$result = $conn->query($sql); 

if ($result->num_rows > 0) { 
    // output data of each row 
    while($row = $result->fetch_assoc()) { 
     $data1 =$row["data1"]; 
     $data2= $row["data2"]; 
     $data3= $row["data3"]; 
     $data4= $row["data4"]; 
     echo "<img src='ahol.PNG' alt='Norway' style='width:100%;'>"; 
     echo "<div class='data1'>" . $data1 . "</div>"; 
     echo "<div class='data2'>" . $data2 . "</div>"; 
     echo "<div class='data3'>" . $data3 . "</div>"; 
     echo "<div class='data4'>" . $data4 . "</div>"; 
    } 
} else { 
    echo "0 results"; 
} 
$conn->close(); 


?> 

更新クライアント側:クライアント側から

<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: 'data.php', 
       success: function(data){ 
        $('#output').html(data); 
       } 
      }); 
     } 
     getData(); 
     setInterval(function() { 
      getData(); 
     }, 1000); // it will refresh your data every 1 sec 

    }); 
</script> 
1

あなたが継続的に必要がある場合ページをリロードせずにデータベースからデータをフェッチするにはいくつかのオプションがありますs available - ajax,websocketsおよびServer Sent Eventsがおそらく最も一般的に使用されています。

websocketsによって提供されている完全な双方向機能は必要ありませんし、データベースのクエリには、これらの可能なオプションを常に送信するためのパラメータが必要です。私のお気に入りはSSE単に設定が簡単で、一定のピンポントラフィック(要求/応答)を必要としないためです。

非常に単純なServer Sent Eventsスクリプトは、データベースをn秒ごとに照会し、レコードセットをjavascriptクライアント。

<?php 

    /* sse.php */ 

    set_time_limit(0); 
    ini_set('auto_detect_line_endings', 1); 
    ini_set('max_execution_time', '0'); 
    ob_end_clean(); 

    /*-------------------------------------------------------------------------*/ 
    $refresh=!empty($_GET['refresh']) ? intval($_GET['refresh']) : 1; 
    $evtname=!empty($_GET['evtname']) ? $_GET['evtname'] : 'sse'; 
    /*-------------------------------------------------------------------------*/ 


    $dbhost = 'localhost'; 
    $dbuser = 'root'; 
    $dbpwd = 'xxx'; 
    $dbname = 'xxx'; 
    $db = new mysqli($dbhost, $dbuser, $dbpwd, $dbname); 

    /* get last record ~ assumed `id` column being auto-increment */ 
    $sql='select * from `makinebilgi` order by `id` desc limit 1;'; 


    function sse($evtname='sse', $data=null, $retry=1000){ 
     if(!is_null($data)){ 
      echo "event:".$evtname."\r\n"; 
      echo "retry:".$retry."\r\n"; 
      echo "data:" . json_encode($data, JSON_FORCE_OBJECT | JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS); 
      echo "\r\n\r\n"; 
     } 
    } 

    header('Content-Type: text/event-stream'); 
    header('Cache-Control: no-cache'); 
    header('Access-Control-Allow-Credentials: true'); 
    header('Access-Control-Allow-Methods: GET'); 
    header('Access-Control-Expose-Headers: X-Events'); 


    while(true){ 
     if(connection_status() != CONNECTION_NORMAL or connection_aborted()) break; 

     $payload=array(); 
     $result = $db->query($sql); 
     while($rs=$result->fetch_object()){ 
      $payload[]=$rs; 
     } 


     /* send the payload */ 
     call_user_func('sse', $evtname, $payload); 


     /* -- Send output -- */ 
     if(@ob_get_level() > 0) for($i=0; $i < @ob_get_level(); $i++) @ob_flush(); 
     @flush(); 


     /* wait for defined period before repeating loop */ 
     sleep($refresh); 

    } //end infinite loop 


    if(@ob_get_level() > 0) { 
     for($i=0; $i < @ob_get_level(); $i++) @ob_flush(); 
     @ob_end_clean(); 
    } 
?> 

Server Sent Eventsスクリプトを呼び出すために、いくつかの簡単なJavaScriptを使用して、クライアント側のコード

<?php 

?> 
<!doctype html> 
<html> 
    <head> 
     <title>sse display of data from c# app to db</title> 
     <script> 
      (function(){ 
       var options={capture:false,once:false,passive:false}; 

       document.addEventListener('DOMContentLoaded',function(event){ 

        var url='/path/to/sse.php?refresh=1&evtname=sse'; 

        var d1=document.getElementById('d1'); 
        var d2=document.getElementById('d2'); 
        var d3=document.getElementById('d3'); 
        var d4=document.getElementById('d4'); 

        if (!!window.EventSource) { 

         var evtSource = new EventSource(url); 
         evtSource.addEventListener('sse',function(e){ 
          var json=JSON.parse(e.data); 
          var keys=Object.keys(json); 
          var obj=json[ keys[0] ]; 

          console.info(json,keys); 

          d1.innerHTML=obj.data1; 
          d2.innerHTML=obj.data2; 
          d3.innerHTML=obj.data3; 
          d4.innerHTML=obj.data4; 

         },options); 
        } 
       },options); 
      })(); 
     </script> 
    </head> 
    <body> 
     <div class='container'> 
      <img src='ahol.PNG' alt='Norway' style='width:100%;'> 
      <div id='d1' class='data1'></div> 
      <div id='d2' class='data2'></div> 
      <div id='d3' class='data3'></div> 
      <div id='d4' class='data4'></div> 
     </div> 
    </body> 
</html> 

上記のいずれもテストされていないが、[OK]をする必要があり - 1が知っていることはありません私の二日酔いの状態を与えられたのに。