Tenho visto muita gente com dúvida em quando usar $.get, $.post e $.ajax (funções Ajax com jQuery) e por isso tentarei explicar cada uma dessas funções da forma mais simples possível para que não haja mais dúvidas. O primeiro passo é saber diferenciar GET de POST:
GET: O método GET é utilizado para capturar valores de variáveis que são enviados ao servidor via Query_String, a qual é concatenada com a url do site. Os dados são lidos com uso da coleção Request.QueryString. O número e tamanho dos valores de campos são limitados.
POST: O método POST é utilizado para capturar valores de variáveis enviadas ao servidor. Os dados são lidos com uso da coleção Request.Form. O número e tamanho dos valores de campos são ilimitados. VANTAGEM: transmite arquivos do disco rígido do cliente ao servidor (upload de arquivo).
Agora podemos dar continuidade. Basicamente a diferença entre os métodos $.get e $.post são as mesmas descritas acima. Ambas são requisições HTTP e tem a mesma funcionalidade, porém nenhuma delas admite callback para erros e acertos, diferente da função $.ajax.
Sintaxe: $.get ou $.post(url, [callback], [tipo]).
Para explicar cada parâmetro dessa sintaxe, vamos ver um exemplo simples. Digamos que você criou um formulário de cadastro de clientes com os campos, nome, cpf e telefone. Com esses dados em mãos, iremos efetuar o cadastro via Ajax utilizando a sintaxe apresentada anteriormente. Vou utilizar o $.post no exemplo.
Obs: Nesse exemplo eu parto do princípio de que quem está lendo tem um conhecimento razoável em javaScript e jQuery e utilizarei o php para recebimento das informações, mas você pode utilizar qualquer linguagem. Não faz parte do escopo desse post o tratamento dos dados recebidos pelo php. Se você possui um pequeno conhecimento e deseja aprofundar mais seus conhecimentos, fica a dica de 2 bons livros do Maujor: jQuery, a biblioteca do programador e Ajax com Jquery.
$.get e $.post:
$.post('cadastroCliente.php', {
nome: $('#nome').val(),
cpf: $('#cpf').val(),
telefone: $('#telefone').val()}, function(resposta){
//Tratamento dos dados de retorno
}, "html"
};
Linha a linha
1 – Passamos a url para onde vamos enviar os arquivos digitados pelo usuário.
2, 3 e 4- Data. Aqui colocamos os campos recebidos pela nossa função, no caso desse exemplo utilizei o jQuery para resgatar os dados digitados nos inputs com o $(“#dadosDoCampo”).val() , que equivale ao document.getElementById do JavaScript.
5- Callback. Aqui efetuamos o tratamento do retorno de nossa solicitação que, como dito anteriormente, não entra no escopo desse post. Mas observe que ao final da linha 4 efetuamos a chamada de uma function passando “resposta” como parâmetro. Esse parâmetro pode ser qualquer palavra que melhor represente o callback. Ex: Se o retorno for um xml, você pode colocar function(xml).
6- Tipo de dado que está sendo enviado, pode ser xml, html, script, json, jsonp ou text.
var params = $('form').serialize();
$.ajax({
//Tipo do envio das informações GET ou POST
type: 'post',
//url para onde será enviada as informações digitadas
url: 'cadastroCliente.php',
/*
* Parâmetros que serão carregados para a url selecionada (via POST).
* o form serialize passa de uma só vez todas as informações que estão
* dentro do formulário. Facilita, mas pode atrapalhar quando não for
* aplicado adequadamente a sua aplicação
*/
data: params,
beforeSend: function(){
/*
* Ação que será executada após o envio, no caso, chamei um gif
* loading para dar a impressão de carregamento na página
*/
$('#loading').fadeIn(); },
//function(data) vide item 4 em $.get $.post
success: function(data){
//Tratamento dos dados de retorno.
},
//Se acontecer algum erro é executada essa função
error: function(erro){
$('#loading').fadeOut();
$('#erroCadastro').fadeIn();
}
});
E aqui termina a primeira etapa. Alguma dúvida? Deixe um recado que prometo responder o mais rápido possível!
[]´s Fernando Valente
Fonte: iMastersFórum e Site do Maujor