Boa tarde galera, sou novo usando ajax e estou tentando usar ajax para atualizar a página a cada inserção de novo registro no banco. Mas meu código esta atualizando infinitamente. O que eu fiz de errado. O primeiro código é o html com ajax e o segundo a consulta que fiz no banco. Alguém pode me ajudar?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="stylesheet" href="lanchescss.css"/>
<meta charset="utf-8">
<title>Lista de Pedidos</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="ajax.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="grid-container">
<div id = "db">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#db').empty();
setInterval(function(){
$.ajax({
type:'post',
dataType: 'json',
url: 'pedb.php',
success: function(dados){
for(var i=0;dados.length>i;i++){
var d = $('#db');
d.append('<p> Pedido: '+dados[i].id+'</p>');
d.append('<p> Hambúrguer Pedido: '+dados[i].hamb+'</p>');
d.append('<p> Observação: '+dados[i].obs+'</p>');
}
}
});
}, 1000);
});
</script>
</body>
</html>
?php
$con = new mysqli("localhost", "root", "", "lanche");
if (mysqli_connect_errno()) trigger_error(mysqli_connect_error());
$qryLista = mysqli_query($con, "SELECT *FROM pedido WHERE DATE(NOW())");
while($resultado = mysqli_fetch_assoc($qryLista)){
$vetor[] = array_map('utf8_encode', $resultado);
}
echo json_encode($vetor);
?>