Jump to content

Ler dados da SQL actualizar a página


sergio.costa
Go to solution Solved by Pedro Felgueiras,

Recommended Posts

sergio.costa

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

Link to post
Share on other sites
  • Solution
Pedro Felgueiras

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

Link to post
Share on other sites
N3lson

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 by N3lson

You can't do it, kid. But don't worry, my boy. You're not the only one. No one else can do it.

Link to post
Share on other sites
sergio.costa

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.