Utilizando Método Post do JQuery + PHP
Olá pessoal, primeiramente feliz 2011 à todos, este ano prometo criar mais que um post por semestre (por precaução eu fiz figa)!
É o primeiro post do ano e veremos um pouco sobre o que foi a coqueluche da web em 2010 e que certamente irá ficar, o JQuery.
O assunto é muito extenso mas para começar nada como os primeiros passos, o básico.
Durante os próximos post’s veremos alguns métodos simples que utilizaremos para Ajax, talvez não vejamos efeitos.
Para começar vamos falar do método $.post.
O Método $.post tem a seguinte sintaxe:
$.post(url,{vars},function(data){
// resto do código
}
Os parâmetros do método:
url: é o destino do post ex. data.php
vars: são os dados que você deseja enviar via post ex. { nome: ‘Joe’, mail: ‘[email protected]’ }
data: nesta var será atribuido o retorno de data.php
o “data” é o que você irá “trabalhar” após a chamada do método.
Vejamos um exemplo, para isso precisaremos criar o arquivo de destino do post, no nosso caso será em PHP (data.php).
Primeiramente vamos criar o método JQuery/Js para enviar os dados para data.php
function getUser()
{
$.post('data.php',{nome: 'Joe', mail: '[email protected]'},function(data){
//mostrando o retorno do post
alert(data)
})
}
A função getUser() está enviando via post pelo JQuery os dados nome e mail para data.php e o rotorno estará contido na var “data“.
O arquivo data.php irá receber os dados via post e retorna-los com o echo disponibilizando o resultado na var data do JQuery, onde os exibimos com o alert.
<?php // extrai os dados do post extract($_POST); // imprime os dados do post echo "Nome: $nome, Mail: $mail"; ?>
Para isso é claro que precisamos do HTML, não vamos adentrar o HTML agora, no geral precisamos apenas chamar a função getUser();
<button onclick="return getUser()">get</button>
Ao chamar o método getUser estaremos enviando os dados {nome: ‘Joe’, mail: ‘[email protected]’} para data.php que os recebe e devolve a mensagem com o echo, esse retorno fica disponível na var data de function(data) do método $.post.
É o básico do método mas a idéia desse post é dar uma noção do funcionamento, nos próximos post’s sobre o JQuery veremos como tornar isso realmente funcional, iremos criar um arquivo PHP com diversos métodos e parâmetros, um arquivo JS/JQuery e HTML para vermos como podemos tornar isso produtivo.
Por hoje é só isso, espero que acompanhem essa sequência de post’s (tentarei postar um por dia durante uma semana).
Abraços,
eu queria fazer qquando envia as informações não atualize a pagina..é como carregar a pagina na div…
mas buscando informações no banco de dados.
tipo essa: “http://tedk.com.br/blog/index.php/2008/10/21/carregar-uma-pagina-dentro-de-uma-div-com-ajax/comment-page-2/#comment-671” mas ela nao funfa se eu criar um busca no bancoe retorna com uma variavel como referencia.
Poderia fazer um esquema para aparecer em uma GRID para deletar, ou alterar os dados
=x
é o que estou precisando
Mais é um otimo post
Abraços
Paulo, poxa cara, infelizmente não tenho tempo. A idéia dos posts desse blog é dar uma direção para o cara se interessar, ler sobre o assunto e tentar desenvolver suas necessidades.
Um abraço e obrigado pelo comentário!
qual é o metodo que passa informaçoes de upload de imagem no jquery? é algo como $.files? porque eu tentei esse e nao funcionou.
Desconheço tal método, para fazer upload via jquery o ideal é você utilizar algum plugin, existem diversos, faça uma busca no google por “JQuery Upload”.
até mais
obrigado
Opaaa.
Faltou fechar um ) no $.post.
Abraços
Oh God! Valeu man!
Olá galera, estou com um problema que não sei como resolver.
Eis a minha função:
$(‘#resposta’).html(‘ ‘);
$(‘a#remove’).click(function(e) {
e.preventDefault();
var idPost = $(this).attr(‘tit’);
$.post(‘deleta.php’, {id:idPost}, function(data){
$(‘#resposta’).html(‘Aguarde’);
if (data==’OK’) {
$(‘#resposta’).addClass(“success”);
$(‘#resposta’).html(‘Excluído com sucesso!!’);
return false;
} else {
$(‘#resposta’).addClass(“error”);
$(‘#resposta’).html(‘Ocorreu um erro!!’);
return false;
}
})
return false;
});
Se alguém puder me ajudar!
Frederic, tente assim!
$(‘#resposta’).html(”)
$(‘#remove a’).live(‘click’,function(){
var idPost = $(this).attr(‘tit’)
$.post(‘deleta.php’,{id:idPost},function(data){
if(data == ‘ok’){
$(‘#resposta’).addClass(‘success’)
$(‘#resposta’).html(‘Sucesso’)
}else{
$(‘#resposta’).addClass(‘error’)
$(‘#resposta’).html(‘Erro’)
return false
}
})
})
Ok Rafael, eu vou tentar dessa forma e assim que tiver um resultado eu posto aqui, ok?
E, se preciso, posto o resto do código para ver se o erro é em outro lugar.
Desde já obrigado.
Cara, não sei o que acontece, fiz tudo conforme falou, mas quando clico no botão, nada acontece.
Tem alguma idéia do que posso estar fazendo errado?
Coloca seu código no http://pastebin.com/ e me passa o link!