Я заполняю таблицу из mysql данных таблицы с помощью ajax jquery, чтобы обновить sh ее содержимое за промежуток времени. Я установил время на 1 секунду. html продолжает повторять таблицу в конце существующей таблицы.
Вот файл php, который успешно создает данные json.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "esp_data";
$conn = new mysqli($servername,$username,$password,$dbname);
$myArray = array();
if ($result = $conn->query("SELECT * FROM sensordata")) {
while($row = $result->fetch_array(MYSQLI_ASSOC)) {
$myArray[] = $row;
}
echo json_encode($myArray);
}
$result->close();
$conn->close();
?>
Вот Основной индексный файл
< !DOCTYPE html >
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script >
var $myTable = $('#myTable')
$(document).ready(function(){
function getData() {
var row = '';
$.ajax({
type: 'POST',
url: 'data.php',
dataType: 'json',
success: function (data) {
$.each(data, function (i, item) {
var row = $('<tr>');
row.append('<td>' + item.value1 + '</td>');
row.append('<td>' + item.value2 + '</td>');
row.append('<td>' + item.Driver + '</td>');
$('#myTable').append(row);
});
}
});
}
getData();
setInterval(function () {
getData();
}, 1000); // it will refresh your data every 1 sec
});
</script>
<body>
<div>
<table id="myTable">
<tr>
<th>Lap</th>
<th>Time</th>
<th>Driver</th>
</tr>
</table>
</div>
</body>
</html>
Генерированные json данные:
[
{
"id": "1",
"value1": "144",
"value2": "00:01:125",
"Driver": ""
},
{
"id": "2",
"value1": "144",
"value2": "00:01:125",
"Driver": ""
},
{
"id": "9",
"value1": "11",
"value2": "00:01:125",
"Driver": ""
},
{
"id": "10",
"value1": "12",
"value2": "00:00:827",
"Driver": ""
}
]
Кто-нибудь знает, почему это происходит и как я могу это исправить?