Поместите данные из базы данных Postgresql в таблицу, используя Ajax и PhP - PullRequest
Новая
       4

Поместите данные из базы данных Postgresql в таблицу, используя Ajax и PhP

0 голосов
/ 17 сентября 2018

Цель моей задачи - заполнять данные из базы данных postgresql каждые 5 секунд, используя ajax и php.Я последовал примеру Как поместить данные из таблицы базы данных в HTML-таблицу, используя ajax и php .Я новичок в PhP, поэтому я не знаю, почему данные не заполняются.Я провел тестирование кода и получил данные в консоли успешно, но не в таблице. Код на стороне клиента 

<!DOCTYPE html>
<html>
<head>
<style> <?php include './../css/hardwarestatus.css'; ?> </style>
</head>
<body>
<div class="maindiv">
        <div id="tagsDiv"> 
                <h3>Estat Tags</h3>
                <?php  

                        echo '<table id="tags_table">';
                        echo "<tr>";
                                echo '<th>' . "TAG" . '</th>';
                                echo '<th>' . "BATTERY" . '</th>';
                                echo '<th>' . " Time " . '</th>';
                                echo '<th>' . "Status" . '</th>';
                        echo "</tr>";
                        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(){
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {


            myObj = JSON.parse(this.responseText);


            for (i = 0; i < myObj.length; i++) {

                console.log(myObj[i]);

                var row = $("<tr />");
                    $("<td />").text(myObj[i].mac).appendTo(row);
                    $("<td />").text(myObj[i].battery).appendTo(row);
                    $("<td />").text(myObj[i].ts).appendTo(row);
                    $("<td />").text(myObj[i].ts).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 of the host";
        $port ="port no."; 
        $user = "user"; 
        $pass = "123"; 
        $db = "db_name"; 
        $con = pg_connect("host=$host dbname=$db user=$user password=$pass")
        or die ("Could not connect to server\n"); 
        $query = "Query string"; 
        $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);
        }                                
?>

1 Ответ

0 голосов
/ 17 сентября 2018

Я не тестировал этот, но подход:

  1. Создание таблицы из php с идентификатором на каждом td element, представляющим идентификатор в базе данных
  2. В строке установить атрибут data, чтобы определить, какая строка изменилась
  3. Когда вы получаете данные обновления от вашего веб-сервиса, вы сравниваете их с элементами данных jquery

Нечто подобное 

$(document).ready(function(){
    const tableEl = $('#tags_table');
    UpdateHTMLTable();
    setInterval(function() {
        UpdateHTMLTable();
    }, 5000); // 5000 millisecond(5 second)

    // An object returned by php reprensenting your data
    const rowHasChanged = function(obj) {
        const lineObj = $('tr#' + obj.id);
        if !(lineObj) {
            return false;
        }

        // Do your logic here
        if (lineObj.data('status') !== obj.status) {
            return true;
        }
        return false;
    };
    function UpdateHTMLTable(){
        const xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {   
            if (this.readyState == 4 && this.status == 200) {
                const data = JSON.parse(this.responseText);
                for (i = 0; i < data.length; i++) {
                    const myObj = data[i];
                    if(rowHasChanged(myObj)) {
                        // Do your stuff to colorize the line, or something to alert
                    }
                }    
            }
        };
        xmlhttp.open("GET", "pages/estat_hardware_server.php", true);
        xmlhttp.send();
    }
});

Не забудьте добавить все связанные данные и идентификатор, чтобы иметь возможность сравнить их с обновлением вашего веб-сервиса 

echo '<table id="tags_table">';
    echo "<tr>";
        echo '<th>' . "TAG" . '</th>';
        echo '<th>' . "BATTERY" . '</th>';
        echo '<th>' . " Time " . '</th>';
        echo '<th>' . "Status" . '</th>';
     echo "</tr>";
 echo '</table>';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...