Show BD record without refresh

Question

// esta é uma pagina separada, chamada adicionar_consulta.php 
<?php
$conexao = new mysqli("localhost","root","","hospital"); 

if ($conexao->connect_errno) {
echo "Failed to connect to MySQL: (" . $conexao->connect_errno . ") " . 
$conexao->connect_error;
}


$res = $conexao->query("SELECT nome,idade 
                    FROM paciente, ficha_atendimento 
                    WHERE paciente.id = ficha_atendimento.id_paciente 
                    AND ficha_atendimento.id IN (SELECT MIN(id) FROM 
ficha_atendimento)
                    AND ficha_atendimento.status IS TRUE");

while ($row = $res->fetch_assoc()) {

echo " id = " . $row['nome'] . "  " . $row['idade']. "</br>";
}

?>

I want to show the data of this query in PHP on the same page where is the button that makes the call. This above code is the query script. When you press the button it is performed, but a redirect to another page occurs.

Answer 1

Using ajax

On your page where you have the button, enter the following code:

   $("#idDoBotao").click(function(){
   $.ajax({
       url:"adicionar_consulta.php ",
       type:"POST",
       data: ({}), //Como não está enviando nenhuma informação, pode deixar vazio
        success:function(resposta){
           $('#resultado').html(resposta);
        }

           });
            });

Considerations

I’m considering that your button has the id "idDoBotao" and that you have a div with the id "resultado"

---

Functioning

By clicking the button with id "idDoBotao" it will execute the function with ajax. After running your php code (and succeeding) it will write the result in your div with id "result

---

Pass parameters in ajax

If you want to submit some value per form, you can take this amount! Suppose I have the following input: <input type="text" name="valor" value="foo" /> The procedure in the code would be as follows:

   $("#idDoBotao").click(function(){
   $.ajax({
       url:"adicionar_consulta.php ",
       type:"POST",
       data: ({valor:$("input[name='valor']").val()}), //estamos enviando o valor do input
        success:function(resposta){
           $('#resultado').html(resposta);
        }

           });
            });

And of course, we would need to take this value in php:

$valor = $_POST['valor']; 
echo $valor; // retornará "foo"

Answer 2

$.ajax({
   type: 'POST',
   URL: 'urlDoSeuPHP',
   data: {
      // valores a ser passado
   },
   success: function(data){
      // Aqui voce trata o retorno
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Best way to do this is with Ajax. There is plenty of tutorial on the internet, and you can simplify using jQuery’s Ajax. Take a look here: https://www.w3schools.com/jquery/jquery_ajax_load.asp

To make it easier, it’s nice that your page already brings the result formatted in HTML, and then you only insert one with a specific id. The site I passed is well didactic, but you find a lot of information about Ajax and jQuery on the internet. Good luck!