Ajax com Jquery | Café ++
Publicado: 27/07/2017 - Everson Vansoski

Ajax com Jquery

Utilizando a tecnologia Ajax com os recursos do Jquery

Neste post vamos fazer uma requisição via ajax, o arquivo requisitado vai nos retornar os valores que foram enviados.

Mas o que é Ajax, afinal?

Segundo o Wikipédia: "É o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações".

Em resumo, o Ajax permite que você faça uma requisição de determinado arquivo sem precisar recarregar a página. Veja abaixo o código em funcionamento:




O código:

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<input id="nome" placeholder="Nome"><br>
<input id="telefone" placeholder="Telefone"><br>
<input value="Enviar" onclick="enviar()" type="button"><br>
 
<span id="aguarde" style="display:none;">Aguarde...</span>
<div id="resultado">

No HTML contém os dois inputs que receberão os dados, o botão de envio, a mensagem "aguarde" e a div onde os dados serão impressos.
Você pode substituir a escrita "Aguarde..." por um gif por exemplo.

function enviar(){
    //pega os dados dos inputs
    var nome = $("#nome").val();
    var telefone = $("#telefone").val();
    $.ajax({
       method: "POST",//pode ser GET ou POST
       url: 'retorno.php',//endereço do arquivo requisitado
       data: {nome: nome, telefone: telefone},//dados a serem enviados
       success: function(data) {//houve sucesso no retorno, imprime na div resultado
          $('#resultado').html(data);
       },
       beforeSend: function(){//antes de completar (exibe a msg de "aguarde...")
          $("#aguarde").css('display','block');
       },
       complete: function(){//requisição completa (fecha a msg de "aguarde...")
          $("#aguarde").css('display','none');
       }
    });
 }

No script contém a função que fará a requisição, o código está comentado em todas as etapas

echo "Nome: ".$_POST["nome"]."<br>";
echo "Telefone: ".$_POST["telefone"];

O PHP é bem simples, apenas retorna o nome e o telefone.

O ajax é utilizado em várias situações e é bastante versátil, basta usar a criatividade.

Everson Vansoski
Analista de Sistemas no setor de contact center em São Paulo - SP