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

[N3lson 18]

Bom dia Sérgio, descarrega o jquery da net e aplica na pagina
https://code.jquery.com/jquery-3.5.1.min.js

Depois o código para pegar os dados de outra pagina e aplicar na que pretendes segue-se da seguinte forma

$.ajax({

    method: "post/get",

    url :"endereçodapagina.aligar",
    data :{ dados a enviar },

   success : function(resposta){

     $(elemento_onde_pretendes_mostrar_resposta).html(resposta)

   }

}) 

 

Edited February 2 by N3lson

[sergio.costa 0]

Ola pessoal.

Muito obrigado pela vossa ajuda.

demorei um pouco a ver e a responder a este tópico pois estava com outros projetos em andamento.

Para concluir acabei por usar o exemplo do Pedro Felgueiras. Pesquisei mais um pouco sobre o XMLHttpRequest() e até o achei bastante facil de trabalhar (para a minha aplicação).

Fica aqui um excerto do codigo para outra pagina dentro do mesmo projecto que usei:

function Actualizar() {
    //Instanciar o AJAX
    var ajax = new XMLHttpRequest();

    //Definir o metodo e o destino
    ajax.open("GET", "./Requisição_Dados/Temperaturas.php");

    //definir tipo de Resposta
    ajax.responseType = "json";

    //Enviar
    ajax.send();

    //Receber os dados
    ajax.onreadystatechange = function () {
        //Validar Comunicação
        if (ajax.readyState == 4 && ajax.status == 200) {

            //console.log(ajax.response);

            //Passar dados para as variaveis
            document.getElementById("Indicador_1").textContent = ajax.response[3].Valor + " ºC";
            document.getElementById("Indicador_2").textContent = ajax.response[2].Valor + " ºC";
            document.getElementById("Indicador_3").textContent = ajax.response[4].Valor + " ºC";
        } else {
            //Visualizar possivel erro
            document.getElementById("Indicador_1").textContent = "Erro" + ajax.status;

        };
    }
};

function initData() {
    setInterval(Actualizar, 100);
}

 

Mais uma vez muito obrigado.

Sem mais de momento.

Sérgio Costa