Programação WEB é à Quinta-feira!

Pedido AJAX em PHP com auxílio de JQuery

por Pedro Gomes

Como vimos nos dois últimos artigos, o Javascript vem trazer às nossas aplicações WEB a interacção e flexibilidade que uma linguagem server-side como o PHP não consegue oferecer. Nesse sentido, decidimos mudar o nome da rubrica "PHP é a quinta-feira" para "Programação WEB é à Quinta-feira! ". Esta semana continuamos a explorar esta linguagem que se tem assumido como a principal linguagem WEB, para além de aumentar um pouco o grau de complexidade da nossa programação vamos também perceber como fazer a integração do JS com o PHP.

Já devem ter reparado que em inúmeros websites onde é possível actualizar a informação de determinado componente da página sem ser necessário refrescar a página ou até ser direccionado para outro endereço. Isto é possível graças a um termo conhecido AJAX (Acrónimo de Asynchronous JavaScript and XML). AJAX representa a utilização de um conjunto de tecnologias conhecidas (como XML ou HTML, entre outros) com o objectivo de criar aplicações Web mais interactivas graças a uma troca assíncrona de informação que não interfere com o comportamento da página (mais informações, em https://developer.mozilla.org/en/AJAX).

Vamos então aprender como utilizar este método na criação de uma página web em PHP e com o auxilio do jQuery. A ideia deste tutorial é criar uma calculadora que permite somar 2 números introduzidos pelo utilizador. Cria-se, então, um formulário PHP muito simples onde existam dois campos de texto e um botão para efectuar o pedido:

<form id="soma_algarismos" action="calculo.php" method="post" >
<label for="primeiro_algarismo">1º Número:</label></p>
<input id="primeiro_algarismo" name="primeiro_algarismo"/>
<label for="segundo_algarismo">2º Número:</label></p>
<input id="segundo_algarismo" name="segundo_algarismo" /><br>
<input type="submit" value="Somar" id="soma"/>
</form>

Num pedido normal (neste caso, sem utilizar AJAX), seriamos redireccionados para a página definida no action do formulário (neste caso, calculo.php), onde seria mostrado o resultado da soma dos dois números. Contudo, vamos efectuar um pedido AJAX, onde se irá obter a informação desejada sem sair da página principal. E é neste momento que entra o jQuery e, mais concretamente, a função jQuery.ajax(). Existem vários parâmetros a definir nesta função, entre os quais destaco os seguintes:

• type: parâmetro que define o tipo de pedido http pretendido (“POST” ou “GET”).
• url: indica o endereço da página à qual se pretende efectuar o pedido.
• data: representa os dados que se pretende enviar.
• dataType: indica o formato dos dados recebidos no pedido.
• success: parâmetro que define o comportamento quando o pedido é efectuado com sucesso. Aqui define-se o que fazer com os dados obtidos.

Vamos então observar como se consegue efectuar este tipo de pedidos através da utilização da referida função. Para compreensão do processo, atente-se nos comentários presentes no código.

<script type="text/javascript">
 
// O processo é desencadeado quando se clica no elemento #soma
 
$("#soma").click(function(){
 
// São recolhidos os valores dos dois algarismos introduzidos pelo utilizador
 
var primeiro_algarismo = $("input#primeiro_algarismo").val();
 
var segundo_algarismo = $("input#segundo_algarismo").val();
 
// Os valores são concatenados na variável <em>‘data’</em>
 
var data = "primeiro_algarismo="+primeiro_algarismo+"&segundo_algarismo="+segundo_algarismo;
 
// É efectuado o pedido, definindo-se os parâmetros explicitados acima.
 
$.ajax({
 
type: "POST",
 
url: "calculo.php",
 
data: data,
 
dataType: 'html',
 
success: function(response) {
 
// O resultado da soma (response) é mostrado no element #resultado.
 
$('#resultado').html(response);
 
}
 
});
 
return false;
 
});
 
</script>

E após isto conseguimos obter o seguinte resultado:

É assim desta forma muito simples, que ficou exemplificado como utilizar este método de efectuar pedidos. As suas potencialidades são imensas bastando para isso explanar a vossa criatividade. Espero que este tutorial tenha sido bastante útil.

Download: pplware_tutorial_ajax (Código fonte - actualizado)