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 ‘data’
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.
