Question

我是PhP和Jquery的初学者。因此，可能会很容易解决这个问题。我使用ajax和PhP成功更新了表格。问题是通过删除所有数据，然后填充新数据来更新表。

我正在寻找其他方法。通过PhP获取新数据后，将新数据与旧数据进行比较，...如果硬件出现问题，请更改状态。.还应保留硬件停止工作的时间。我在Put data from Postgresql database to table using Ajax and PhP之前提出问题，@ Mcsky在其中提出了一个解决方案，但我没有采用他的方法。因此，如何仅更新表数据？而不是完全刷新表，感觉就像页面刷新一样。这是我的客户代码： estat_hardware.php

<!DOCTYPE html>
<html>
<head>
<style> <?php include './../css/estat_hardware.css'; ?> </style>
</head>
<body>
<div class="maindiv">
        <div id="tagsDiv"> 
                <h3>Estat Tags</h3>
                <?php                                      
                        echo '<table id="tags_table">';
                        echo "<thead>";
                        echo "<tr>";
                                echo '<th>' . "TAG" . '</th>';
                                echo '<th>' . "BATERIA" . '</th>';
                                echo '<th>' . " VIST ÚLTIMA COP " . '</th>';
                                echo '<th>' . "ESTAT" . '</th>';
                        echo "</tr>";
                        echo "</thead>";
                        echo "<tbody>";
                        echo "</tbody>";
                        echo '</table>';                            
                ?>
        </div>
</div>
<script src='http://code.jquery.com/jquery-3.1.1.min.js'></script>

<script>
$(document).ready(function(){
        UpdateHTMLTable();
        setInterval(function() {
                UpdateHTMLTable();
        }, 5000); // 5000 millisecond(5 second)

function UpdateHTMLTable(){  
     /*   $('#tags_table tbody').empty(); */
         $('#tags_table tbody').html("");
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
               data = JSON.parse(this.responseText);
                        for (i = 0; i < data.length; i++) {
                        console.log(data[i]);
                var row = $("<tr />");
                    $("<td />").text(data[i].mac).appendTo(row);
                    $("<td />").text(data[i].battery).appendTo(row);
                    $("<td />").text(data[i].ts).appendTo(row);


                    $battery_beacon=data[i].battery;

                    if($battery_beacon<15)
                    {
                            $status="Canvi Batteria";
                    }                   
                    else{
                        $status="Correcte ";  
                    }

                    $("<td />").text($status).appendTo(row);            
                    row.appendTo('#tags_table');     
                } 
        }
};
xmlhttp.open("GET", "pages/estat_hardware_server.php", true);
xmlhttp.send();
}
});
</script>

</body>
</html>

服务器代码为：

<?php 
header("Content-Type: application/json; charset=UTF-8");  
        $host = ip";
        $port ="portNumber"; 
        $user = "abc"; 
        $pass = "...."; 
        $db = "name"; 
        $con = pg_connect("host=$host dbname=$db user=$user password=$pass")
        or die ("Could not connect to server\n"); 
        $query = "query string for database"; 
        $result = pg_query($con, $query) or die("Cannot execute query: $query\n");
        if(pg_num_rows($result))
        {
            $data=array();
            while($row=pg_fetch_array($result))
            { 
                $data[] = array(
                'mac'=>$row['mac'],
                'ts' =>$row['ts'],
                'battery'=>$row['battery']
                 );
            }         
            echo  json_encode($data);
            pg_free_result($result);
            pg_close($con);
        }                                
?>

更新表的内容，而不是使用ajax和PhP完成表

0 个答案: