AJAX básico com JQuery e PHP
Share This Post
Use the links above to share or bookmark this post.
Neste tutorial eu vou explicar de forma bem simples um exemplo de AJAX com JQuery e PHP. O exemplo consiste em um formulário, que pede nome e idade do usuário, e ao clicar no botão ‘Enviar’, é feita uma requisição HTTP ao Servidor. Ao receber a resposta, o formulário desaparecerá com um ‘Fade Out’ e será mostrada a resposta com um ‘Fade In’.
Precisaremos de 4 arquivos no nosso exemplo: index.html, ajax.php, jquery.js, exemplo.js. Você pode baixar os arquivos prontos do exemplo: exemploAjax1.zip. No ‘index.html’ ficará o nosso formulário. No ‘ajax.php’ está o script que vai interpretar a requisição para devolver uma resposta. ‘jquery.js’ é o arquivo do Framework Javascript JQuery, que usaremos no nosso exemplo. Finalmente ‘exemplo.js’ é o arquivo onde ficará nosso código JQuery para interagir com o servidor.
Começamos com o ‘index.html’, fazendo referência aos arquivos ‘.js’ e contendo o formulário:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="exemplo.js"></script> <title>Javascript Test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <form style="font-family: sans-serif; display: none" id="form1"> Nome: <input id="nome" name="nome" type="text"/><br /> Idade: <input id="idade" name="idade" type="text"/><br /> <input id="enviar" name="enviar" type="submit" value="Enviar"/> </form> </body> </html>
Vejam que eu não determinei o ‘action’, nem o ‘method’ do formulário. Ao usar AJAX, estes dois parâmetros não serão necessários, já que a requisição é feita pelo ‘exemplo.js’. O que será necessário é pegar os valores contidos nos ‘input’ do formulário para podermos formar nossa requisição. Então vamos agora para o ‘exemplo.js’. Vamos acrescentar primeiro um pouco de ‘estilo’ ao exemplo:
$(document).ready(function() { $("#form1").fadeIn(1000); });
Adicione o código acima no seu ‘exemplo.js’. Esse ‘$’ pode parecer estranho, mas é um alias para a classe/objeto JQuery. Primeiramente, o documento HTML precisa estar pronto para poder ser manipulado pelo script. ‘$(document).ready()’ significa que o objeto ‘document’ está sendo passado como argumento para o JQuery, e o método ‘.ready()’ indica que o documento está pronto. Vejam que foi passada uma função como argumento do método ‘.ready()’. Isto é chamado de ‘Callback’. ‘Callback’ é uma função que foi passada como parâmetro e é executada após a função que a chamou, o ‘Callback’ é especialmente útil quando queremos fazer uma cadeia de funções. Como parâmetro para ‘.ready()’, eu chamo uma função anônima: ‘function() {}’. Juntos, o ‘Callback’ e as funções anônimas criam uma cadeia de funções, onde cada função passada como parâmetro depende da função que a recebeu como argumento, podendo usar objetos e variáveis da função pai.
Vejam que coloquei no formulário a propriedade CSS ‘display:none’. Isto é necessário para não mostrar o fomulário, pois iremos usar um efeito de ‘Fade In’ para mostrá-lo. Sem esconder o formulário, este apareceria na tela e em seguida teria início o ‘Fade In’. Faça o teste: retire a propriedade e veja como ficaria estranho sem esconder o formulário primeiro. Na próxima linha executamos no formulário o método ‘.fadeIn()’, este recebe como argumento a duração da animação em milissegundos, e ainda por padrão o método aceita como argumento “slow” e “fast”. Execute o código acima e veja como fica o efeito.
O próximo passo será ler os valores inseridos no formulário. Teremos de ler os valores após o usuário clicar no botão enviar, segue o código:
$(document).ready(function() { $("#form1").fadeIn(1000); $("#form1").submit(function(event){ event.preventDefault(); var username = $("#nome").attr("value"); var userage = $("#idade").attr("value"); $('<br /><span>Loading...</span>').appendTo('#form1'); }); });
Selecionando o formulário, executamos o método ‘.submit()’ que recebe um ‘Callback’. Como argumento para ‘.submit()’ escreveremos a função que executará após o envio do formulário. Vejam que na função foi passada um argumento ‘event’, este é um objeto JQuery que usaremos para controlar o comportamento normal do formulário, que faria o browser fazer uma requisição ao servidor, recarregando a página (podemos dar qualquer nome para o argumento ‘event’). Para não recarregar a página, cancelaremos o comportamento normal com ‘.preventDefault’. Em seguida, selecionamos os nossos ‘input’ marcados com ‘id’, pegamos o valor do seu atributo ‘value’ com o método ‘.attr()’, e atribuimos às variáveis (OBS: é recomendado sempre usar ‘var’ antes da variável ao declará-la, senão a variável torna-se global, o que não é bom). O atributo ‘value’ é gerado pelo browser após o usuário digitar algo no formulário. Para dar um feedback para o usuário criamos um trecho HTML e colocamos dentro do formulário. Ao colocar uma string com código HTML dentro de um seletor do JQuery, este cria o elemento passado no código, e com o método .appendTo(‘#form1′) adicionamos o elemento criado no formulário. Este método recebe como argumento um seletor, que no caso é o id do formulário.
Antes de vermos como é feita a requisição AJAX, vamos olhar o código no servidor, ajax.php:
<?php { $idade = $_POST['idade'] + 30; $nome = $nome . " Envelhecido(a)"; } else { $idade = 0; $nome = $nome . " Bebê"; } $resposta = array("nome" => $nome, "idade" => $idade); $resposta = json_encode($resposta); echo $resposta; ?>;
O servidor é bastante simples, feito com PHP puro: ele recebe os dados do ‘POST’, avalia se a idade passada é maior que 1, se sim, envelhece o usuário. Se não, se o usuário não digitou idade assume-se que ele é um bebê com 0 anos de vida (não é muito inteligente, mas serve para o propósito deste tutorial). Então o servidor cria um array associativo com os dados processados, codifica no formato JSON, e envia a resposta. Atenção é dada ao formato JSON e ao envio da resposta. Sabemos que AJAX significa ‘Asynchronous Javascript and XML’, e que precisamos de um formato de dados para trocar informações entre o cliente Javascript e o servidor. Porque o formato JSON? É mais leve, simples de enteder, e mais fácil de gerar interpretadores. Nossa resposta ao cliente Javascript será uma string desse tipo: {“nome”:”Ivan Envelhecido”,”idade”:”51″}. Veja uma comparação entre JSON e XML neste link: JSON – Wikipedia .
Hora de fazer a requisição AJAX! utilizaremos o método ‘.post()’ do JQuery para isso (acho mais seguro e organizado enviar dados sempre pelo POST). Veja a assinatura do método:
JQuery.post(url, data, function(response){}, dataType);
O primeiro parâmetro, ‘url’, indica a URL para qual será feita a requisição, no nosso caso: ajax.php. ‘data’ são os parâmetros a serem passados para o POST, deve obedecer o formato: {variavel : outra_variavel, variavel2 : “string”}. o terceiro parâmetro é a função que será executada após receber a resposta. O argumento ‘response’ vai receber a resposta do servidor, e pode receber qualquer nome, assim como ‘event’. O quarto parâmetro é o tipo de resposta esperada, e pode ser “json” ou “xml”, vamos escolher o “json”. Vejam como vai ficar a requisição, e o resto do script após receber a resposta:
$(document).ready(function(){ $("#form1").fadeIn(1000); $("#form1").submit(function(event){ event.preventDefault(); var username = $("#nome").attr("value"); var userage = $("#idade").attr("value"); $.post('ajax.php', {nome: username, idade: userage}, function(json){ $("#form1").fadeOut("slow",function(){ $('<div></div>', {"id":"para", text: "Seu nome é "+json.nome+" e você tem "+json.idade+" anos."}) .css({backgroundColor: "yellow", fontFamily: "sans-serif"}) .fadeIn("slow").appendTo('body'); }); }, "json"); }); });
Chamamos o método ‘$.post(‘ajax.php’, {nome : username, idade : userage}, function(json){}, “json”). É feita uma requisição POST com os dados passados para o método e esperamos receber uma resposta JSON. O JQuery automaticamente transforma a resposta JSON válida em um objeto Javascript e nos entrega este objeto no argumento ‘json’, que iremos usar para dar o feedback ao usuário. Se houver qualquer texto antes ou depois do JSON, o método do JQuery não vai transformar a resposta em objeto, nesse caso vai ser necessário fazer o parsing da resposta (dá um pouco de trabalho). A primeira coisa que é feita após receber a resposta é esconder o formulário, já não precisamos mais dele. Então é selecionado o formulário e executamos o método ‘.fadeOut()’. O primeiro argumento é a velocidade “slow”, o segundo é uma função, que usaremos para dar a resposta ao usuário depois que o formulário desaparecer. Para criar um elemento na página, usamos ‘$(‘
)’. Podemos escrever todo um documento HTML para o JQuery criar o elemento. Mas vamos usar uma abordagem mais interessante e passar o conteúdo e atributos do parágrafo usando um segundo argumento: ‘$(‘
‘, {“id”:”para”, text: “Texto”})’, poderíamos passar também o CSS escrevendo um atributo ‘”style”:”color:yellow”‘, mas optei por usar o método ‘.css()’ para aplicar o CSS. Após o CSS, aplico o efeito ‘.fadeIn()’, “slow”, para que ele apareça devagar. Por fim, mando acrescentar o elemento ao ‘body’ do documento com o método ‘.appendTo()’. Lembre-se que a cada método chamado sobre um objeto JQuery, é retornado um objeto JQuery, e você pode chamar mais um método e assim por diante.
Terminamos por aqui este simples tutorial sobre AJAX com JQuery e PHP, usando JSON para troca de dados entre cliente e servidor. Lembrem-se de validar os dados vindos de formulários, e usar ‘htmlstriptags()’ para sanar as strings recebidas no PHP. Quaisquer dúvidas, correções e sugestões, por favor, comentem.
Posted by Ivan Quirino under Programação | Permalink
Ei cara, nota 1000 o Post, de fato ele é bem simples e tals, de acordo com o propósito do Post. Este Script é muito bom!
Boa tarde Ivan,
Muito bom o post.
Tenho uma dúvida.
Quero requisitar uma variável de url e mandar para um campo em um arquivo php (player).
Posto aqui ou mando um email pra vc?
Desde já, agradeço.