Ler dados da SQL actualizar a página

[sergio.costa 0]

Boas pessoal.

Sou novo nestas andanças do PHP JS e SQL e tenho um duvida... Eu tenho o seguinte código php no final do body antes de fechar a tag html:

Estou a receber os dados como <p> ocultos ocultos e depois trato os dados na função Iluminação.js.
 

</body>
<?php
//Buscar dados na SQL

//Incluir Ligação
include("Ligar_SQL_variaveis.php");

//Dimensionar QUERY
$query = "SELECT * FROM iluminação";

//Enviar QUERY
$result = mysqli_query($conexao, $query);

//Separar Valores Pretendidos
while ($row_Linha = mysqli_fetch_assoc($result)) {
    echo "<p id= '" . $row_Linha['Local'] . "' style='display: none;' >" . $row_Linha['Estado'] . "</p>";
}
?>
<script src="./js/Relogio.js"></script>
<script src="./js/Iluminação.js"></script>
</html>

Encontrei alguns exemplos na net com um tal de jquery.js mas todos ele fazem com ligação externa a WWW mas para no meu caso a rede não está ligada a net.

 

Alguem me pode dar uma ideia de como posso fazer a actualização dos dados sem fazer refresh a pagina?

 

Desde já obrigado pela atenção.

Sérgio Costa

[Pedro Felgueiras 0]

Boa Noite, Sérgio,

Acho que a solução para o teu problema está em usar o AJAX, uma tecnologia nativa dos navegadores para fazer http requests.

O código para usar o AJAX no javascript puro é um pouco mais complexo do que no jQuery, uma lib do javascript.

Vê este exemplo de código javascript abaixo:

function atualizarDados() {
   // Instanciar AJAX
   const request = new XMLHttpRequest();
  
   // Evento disparado quando chegar uma resposta do servidor
   request.onreadystatechange = () => {
     // Verificar se o servidor já respondeu
     if(this.readyState == 4) {
     	// Faz algo com a resposta enviada pelo servidor
     	console.log(this.responseText);
     }            
   };
   
   request.open(/*HTTP method*/, /*URL*/, true);
   request.send(/*Corpo da requesição, se houver*/);
}

Se precisares de mais informação, podes consultar a documentação da mozilla: https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest