Ajax com jquery: Enviando dados via ajax
2015-12-31
Ajax é uma forma de enviar e receber dados do servidor sem precisar recarregar a página. Com jQuery, isso fica bem simples.
O que é Ajax?
Ajax significa Asynchronous JavaScript and XML. Na prática, é uma forma de fazer requisições ao servidor em segundo plano. O usuário continua usando a página normalmente enquanto os dados são enviados ou recebidos.
Enviando dados com GET
O método GET é usado quando você quer buscar informações do servidor.
$.ajax({
url: '/api/usuarios',
method: 'GET',
success: function(resposta) {
console.log(resposta);
},
error: function() {
console.log('Algo deu errado.');
}
});
Existe também um atalho pra isso:
$.get('/api/usuarios', function(resposta) {
console.log(resposta);
});
Enviando dados com POST
O método POST é usado quando você quer enviar informações pro servidor, como dados de um formulário.
$.ajax({
url: '/api/usuarios',
method: 'POST',
data: {
nome: 'Laura',
email: 'laura@email.com'
},
success: function(resposta) {
console.log('Dados enviados!', resposta);
},
error: function() {
console.log('Erro ao enviar.');
}
});
O atalho equivalente:
$.post('/api/usuarios', { nome: 'Laura', email: 'laura@email.com' }, function(resposta) {
console.log('Dados enviados!', resposta);
});
Enviando dados de um formulário
Um uso comum é capturar o submit de um formulário e enviar os dados via Ajax:
$('#meu-form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: '/api/contato',
method: 'POST',
data: $(this).serialize(),
success: function(resposta) {
alert('Mensagem enviada!');
},
error: function() {
alert('Erro ao enviar.');
}
});
});
O e.preventDefault() impede que o formulário recarregue a página. O $(this).serialize() pega todos os campos do formulário e transforma numa string pronta pra enviar.
Trabalhando com JSON
Se o servidor retorna JSON, você pode dizer isso pro jQuery:
$.ajax({
url: '/api/usuarios',
method: 'GET',
dataType: 'json',
success: function(dados) {
dados.forEach(function(usuario) {
console.log(usuario.nome);
});
}
});
Ajax com jQuery é isso. Simples, direto e resolve a maioria dos casos onde você precisa trocar dados com o servidor sem recarregar a página.
