Javascript Usando ajax para atualizar sem refresh

joaoufms · 16 de dezembro de 2017

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);
?>

Will871 · 17 de dezembro de 2017

Boa noite.

Então, cara, ali você deu um setInterval e disse para ele reexecutar o código a cada 1000 milissegundo, que seria basicamente a cada segundo.

o ajax não sabe quando há alterações no banco, literalmente não tem como ele saber!

Uma das formas de fazer, seria essa:

Retire esse setInterval, recomendo colocar o ajax dentro de uma function e chamar ele quando o documento estiver pronto, seria basicamente assim:

<script type="text/javascript">	
$(document).ready(function(){
  qualquerCoisa();
});
 function qualquerCoisa(){
	$.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>');

			}
		}
	});
  }
</script>

Dessa forma ele seria executado assim que a página iniciasse, faria a execução somente uma vez e pronto.

Para fazer ele atualizar a partir de um botão, faça o seguinte:

<button onclick="qualquerCoisa()">Chamar o ajax</button>

Basta inserir esse button dentro da tag "<body>", sendo assim, quando esse botão for clicado, ele chamará a função "qualquerCoisa()" novamente.

Obs: a function qualquerCoisa() será um nome definido por você, usei esse somente para poder te dar como exemplo.

---------------------------------------------

Mas respondendo sua duvida, para ele atualizar sozinho, sem dar refresh ou apertar os botões, você usaria o setInterval igual ai em cima, mas vou te explicar como ele funciona antes.

Considerando que tenha deixado sua página como recomendei ai em cima, vamos alterar a parte do "$(document).ready(function)" para o seguinte:

$(document).ready(function(){
	setInterval(function(){//Quando o documento estiver pronto, dê um setinvertal em qualquerCoisa()
      qualquerCoisa();
    }, 1000//o setInterval será executado a cada 1 segundo, caso queira que seja executado a cada 5 segundos seria "5000".
});

e no PHP é bem simples, faça uma verificação se teve realmente alguma alteração no banco, caso não, não retorne valor nenhum, caso tenha retorne.

O que vai acontecer ai é o seguinte:

Ele vai disparar o "qualquerCoisa()" independente de ter atualização ou não, como já foi citado, ele não pode saber quando tem atualização no banco, caso exista uma atualização, ele vai atualizar os textos, caso não ele simplesmente faz nada.

Recomendo utilizar o PHP Orientado a objetos para tirar melhor proveito do ajax.

Precisando só perguntar aqui mesmo.

Boa sorte!

joaoufms · 17 de dezembro de 2017

Boa Noite, olha então pelo que entendi o que falta é o php indicar se houve alteração no banco e chamar a função, mas eu nunca fiz isso tipo de coisa, você não pode me mostrar um exemplo?

iHollyZinhO · 17 de dezembro de 2017

O que pode ser feito é o seguinte: criar uma variável global para servir de chave quando a página for carregada pela primeira vez, como por exemplo o número total de registros existentes. Depois, você envia essa variável pelo Ajax para uma página PHP e verifica se o número de registros enviado é o mesmo. Se não for o mesmo, você deverá enviar as informações que deseja obter a partir dos novos registros e atualizar a variável criada inicialmente no success do Ajax.

Will871 · 17 de dezembro de 2017

Bom diia!

@joaoufms Agora eu tenho mais tempo, vou te ajudar com o php!

o @iHollyZinhO falou uma coisa bem interessante, podemos criar essa "variável global" diretamente no javascript, ela vai ter armazenado nela a quantidade de execuções no primeiro retorno, então teremos que adicionar esse código aqui na página:

var att = window.localStorage.getItem('retornos');

Criamos uma variável chamada "att", e usamos o código "window.localStorage.getItem" que literalmente cria uma variável global, e dissemos que o nome de nossa variável global será "retornos", isso se retornos já não existir, caso exista ela pega o valor que tem nessa variável global e salva na "att".

Tendo isso, precisamos, além de atualizar essas informações a cada execução, passar ela pro PHP, pra fazermos isso precisaríamos do seguinte:

<script type="text/javascript">	
$(document).ready(function(){
	var att = window.localStorage.getItem('retornos'); //Criamos a variável ATT para receber a variável global retornos
	setInterval(function(){//Quando o documento estiver pronto, dê um setinvertal em qualquerCoisa()
		qualquerCoisa(att); //Enviamos os valores contidos na variável ATT como parâmetro na execução do ajax
    	}, 1000 );//o setInterval será executado a cada 1 segundo, caso queira que seja executado a cada 5 segundos seria "5000".	
});
 function qualquerCoisa(retornos){ //Recebemos o parâmetro com o nome de "retornos"
	$.ajax({
		type:'post',		
		dataType: 'json',	
		url: 'pedb.php',
        data: {retornos},//Enviamos "retornos" para o PHP usando o "data", ele será recebido no PHP como "$_POST['retornos']".
		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>');
			}
            window.localStorage.setItem('retornos', dados.length);//Salvamos os dados retornados no success na nossa variável, e na próxima execução ela estará alterada para o valor de retornos que tivemos do PHP.
		}
	});
  }
</script>

Agora que o ajax esta pronto, vamos ao PHP.

Precisamos ver o que temos na variável "$_POST['retornos']", fazer uma contagem de quantas execuções teríamos no PHP e comparar o resultado da contagem com o da variável "$_POST['retornos']", caso seja diferente ele vai atualizar, se não ele fará nada, isso ficará da seguinte forma (Eu não manjo muito de mysqli, eu só uso o PDO :/ ):

<?php
    $con = new mysqli("localhost", "root", "", "lanche");
    if (mysqli_connect_errno()) trigger_error(mysqli_connect_error());
	$sql = "SELECT *FROM pedido WHERE DATE(NOW())";
	$retornos = mysqli_num_rows($con, $sql); //Coloquei $con aqui como parâmetro, mas não tenho certeza se é necessário.
	if($_POST['retornos'] == $retornos)
		exit;
    $qryLista = mysqli_query($con, $sql);    
    while($resultado = mysqli_fetch_assoc($qryLista)){
        $vetor[] = array_map('utf8_encode', $resultado); 
    }    
    echo json_encode($vetor);
?>

Como já disse que não manjo muito, poderá ter algum erro, mas ai você vai ter que verificar!

O que eu fiz foi basicamente isso:

criei uma variável chamada "sql" e coloquei o comando nela, usei o "mysqli_num_rows" para fazer a contagem de retornos que teremos ao executar esse comando e armazenei na variável "retornos", caso a variável "retornos" tenha o mesmo valor da variável global "$_POST['retornos']" (que é referente ao valor enviado pelo ajax), ele irá dar verdadeiro, e cairá no "exit", assim o código será encerrado sem nenhum retorno, e no ajax ele não entrará no for, dessa forma não atualizará o conteúdo, caso seja uma condição falsa, basicamente se o "$_POST['retornos']" for diferente de "retornos", ele fará a execução normal, retornará conteúdo e o ajax irá atualizar os dados.

Vale lembrar que poderá conter alguns erros, especialmente no PHP, estou passando os códigos sem nem testar, mas acredito que esteja correto.

Qualquer dúvida só postar aqui mesmo.

Boa sorte!