Функция setinterval () AJAX дублирует мой HTML?
Я создал таблицу, в которой одно текстовое поле обновляется каждые 10 секунд с данными запроса к базе данных, но каждый раз, когда функция выполняется, она как бы дублирует мой существующий HTML-код. Вот до и после картина
И мой HTML:
РЕДАКТИРОВАТЬ: PHP тоже:
<?php
include '../Login/db_login.php';
$page="bt1admin.php";
session_start();
$sql = "SELECT Contador FROM senhas2 WHERE ID=1";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$nome = $row['Contador']
?>Решение
Похоже на ваш bt1admin.php Файл возвращает всю страницу, а не только номер. Вы можете создать отдельный файл только для извлечения данных или сделать что-то вроде этого:
$(function() {
var Main = {
onDataSuccess: function(data) {
if (data.success) {
$('#refreshtb').text(data.numberOfAttendees);
console.log('Last fetched:', data.now);
}
},
onDataError: function() {
console.log('error');
},
onDataAlways: function() {
setTimeout(Main.fetchData, 10000);
},
fetchData: function() {
$.getJSON('bt1admin.php?ajax')
.done(Main.onDataSuccess)
.fail(Main.onDataError)
.always(Main.onDataAlways);
}
}
Main.fetchData();
});<?php
// this should be at the beginning of your PHP file
// before anything is send to the browser
/* ... */
if (isset($_GET['ajax'])) {
echo json_encode(array(
'numberOfAttendees' => $nome,
'now' => date('H:i:s'),
'success' => true
));
die;
}
?>
<!-- ... -->
<form action="" id="atender" method="POST">
<table border="1">
<tr>
<td>Clientes em espera:</td>
<td><label id="refreshtb"><?php echo "$nome"; ?></label></td>
</tr>
<!-- ... -->
</table>
</form>
<!-- ... -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Другие решения
Других решений пока нет …
detector