Meu objetivo com esta série de POSTs é mostrar como fazer uma requisição via AJAX com o JQuery. Desde os meios mais simples aos porradas!
O JQuery tem alguns metodos para fazer requisições AJAX, são elas: $.ajax(), $.post(), $.get() e $.load(). E também tem $.getJSON() e $.getScript para aplicações um tanto complexas.
Vamos ver sobre todos estes metodos nesta série de POSTS.
Para o POST de hoje (o 2° da serie), vamos estudar dois metodos. O primeiro é:
$.get( url, [data], [callback], [type] )
onde:
url String
É a URL da pagina a ser carregada.
data (Opcional) Map string
São pares de chave e valor que serão enviados ao servidor, via POST.
callback (Opcional) Callback function
Uma função chamada assim que a requisição ajax estiver completa. Independente do resultado ela será executada.
type (Opcional) String
É o tipo de dados a ser retornado para a callback function. O tipo de dados pode ser: “xml”, “html”, “script”, “json”, “jsonp”, ou “text”.
Este metodo serve para fazer uma requisição ajax via GET, ou seja, ele envia dados ao servidor via GET.
E o segundo metodo é:
$.post( url, [data], [callback], [type] )
onde:
url String
É a URL da pagina a ser carregada.
data (Opcional) Map string
São pares de chave e valor que serão enviados ao servidor, via POST.
callback (Opcional) Callback function
Uma função chamada assim que a requisição ajax estiver completa. Independente do resultado ela será executada.
type (Opcional) String
É o tipo de dados a ser retornado para a callback function. O tipo de dados pode ser: “xml”, “html”, “script”, “json”, “jsonp”, ou “text”.
Este metodo faz exatamente a mesma coisa que a anterior só que os dados são enviados via POST.
Vamos ver exemplos de como usa-las, mas primeiro teremos que fazer um script PHP para atender as requisições ajax. Aí vai o código base PHP:
< ?php
$nome = empty($_GET['nome']) ? $_POST['nome'] : $_GET['nome'];
$idade = empty($_GET['idade']) ? $_POST['idade'] : $_GET['idade'];
echo strtolower($nome)."$idade@boa-ventura.net";
?>
2. O valor de $nome será igual ao POST ou GET nome, dependendo do que tiver algum valor.
3. A mesma coisa só que para $idade.
4. Mostra o nome+idade em letras minusculas com @boa-ventura.net no final.
Vamos usar este script para todos os exemplos. Salve-o como pegaajax.php.
Espero que você tenha lido o post anterior, pois não vamos regredir até aquele ponto, agora vamos avançar. Lembre que eu fiquei devendo a explicação das opções data e callback function, portanto aí vão.
Exemplo1:
carrega via ajax
5. Quando a pagina estiver carregada,
6. Todos os links quando forem clicados,
7. Faz a requisição ajax via GET em pegaajax.php,
8. Envia duas variaveis: nome com valor Pedro e idade com valor 20.
9. Quando a requisição estiver pronta executa a callback function.
Dica
Uma coisa muito boa no JQuery são as callback functions. Quase todos os metodos possuem esta opção. Uma callback function é uma função javascript passada por parametro para um metodo. Essa função é executada independente se o resultado for true (verdadeiro) ou false (falso). Algumas callback functions provêem um argumento como a do exemplo acima (data). Para mais informações veja a documentação da JQuery aqui.
Salve o exemplo acima em um arquivo html e teste-o. Funcionou? beleza…Agora tente substituir na linha 7 a palavra get por post, ficando assim: $.post(“pegaajax.php”, function(data){
Funcionou? legal…ta vendo! faz exatamente a mesma coisa. Como o nosso script PHP suporta tanto o GET como o POST então deu tudo certo.
Exemplo2:
carrega via ajax
5. Quando a pagina estiver carregada,
6. Todos os links quando forem clicados,
7. Faz a requisição ajax via GET em pegaajax.php,
8. Envia duas variaveis: nome com valor digitado no input nome e idade com o valor do input idade.
9. Quando a requisição estiver pronta executa a callback function.
Deu certo? legal!
Vamos ficar por isso neste POST. Ainda temos que ver a opção type deste metodo, é aí que o negócio começa a ficar bom.
Antes de terminar vamos fazer uma coisa simples para sabermos o status (situação) de nossa requisição. Vamos fazer uma barrinha com um “loading” a partir do exemplo 2.
Exemplo3:
Carregando
carrega via ajax
6. A “div carrega” deve ficar escondida.
8. Quando for clicado no link (linha 7) a “div carrega” deve aparecer.
11. Depois de mostrar o resultado a “div carrega” se esconde novamente.
Ridiculo! Mas funcional! Nos proximos posts isso vai ser aprimorado.
Dica
Evite colocar estilos junto do codigo html. Em 99% dos casos isso é possivel. É sempre mais organizado ter codigo html, css (estilo) e javasrcipt separados.
