Enviando post com jQuery e PHP
Salve Galera,
Há alguns dias atrás precisei para um projeto meu, implementar um post que além de enviar os dados para um script PHP sem sair da página não precisasse ser recarregada, inclusive queria agradecer o pessoal da comunidade pela ajuda, depois de dar uma pesquisada cheguei a conclusão que o jQuery iria suprir minha necessidade.
Como obtive sucesso, gostaria de compartilhar com o grupo o resultado, porém gostaria de avisar que esse post busca ser uma “luz no fim do túnel” para iniciantes, portanto se você já é experiente no assunto pode ficar a vontade para sugerir modificaçõs e melhorias.
Tenho como premissa que você já possui: Um servidor PHP instalado, se não possui, sugiro que leia meu post “Instalando Apache, MySQL e PHP5 no Ubuntu” ou se você é usuário Windows baixe e instale o Xampp, algum conhecimento em HTML, jQuery e PHP.
Como exemplo iremos criar uma página que informará ao usuário o preço com desconto de um determinado valor.
Vamos ao código!
Primeiramente você terá que baixar o jQuery e incluí-lo á sua página.
<script type="text/javascript" src="jquery-1.3.2.js"></script>É preciso criar os campos que receberam os valores não esquecendo de colocar seu “ID” pois será preciso para manipulá-los, note que não estou usando a TAG <form></form>. pois quem irá controlar o envio do post é o jQuery.
<label>Valor R$</label> <input name="valor" id="valor" type="text" /><br /> <label>Desconto %</label> <input name="desc" id="desc" type="text" /> <br /> <div id="retorno"></div> <br /> <input name="calc" id="calc" type="submit"/>
Agora usaremos o jQuery, dentro da TAG <head></head>você terá que criar um novo script.
<script type="text/javascript"> $(document).ready(function(){ //Dispara o Submit ao clicar no input com id = #calc $('#calc').click(function(){ //Pega o valor do campo Valor var valor = $('#valor').val(); //Pega o valor do campo Desconto var desconto = $('#desc').val(); //Pega o post e envia para o script CalculaDesconto.php em formato JSON $.post('CalculaJuros.php',{valor: valor,desconto: desconto}, function(data){ //Imprime o retorno do script PHP $('#retorno').text(data); }); }); }); </script>
Para finalizar usaremos o PHP para fazer os calculos e retornar o resultado.
<?php //Método para extrair os dados do POST extract($_POST); //Crio uma função para calcular o preço final com desconto function calcDesconto($valor,$desconto){ //Descobre quanto é 1% do valor total $umPorcento = $valor / 100; //Descobre quanto vai ser o valor do desconto $totalDesc = $umPorcento * $desconto; //retorna o valor total com desconto $resultado = $valor - $totalDesc; return $resultado; } //imprime na tela o valor total com desconto echo "Total com desconto R$ ".calcDesconto($valor,$desconto); ?>
Até uma próxima pessoal!
Cara, tô começando com jQuery agora também, e achei o post muito interessante. Depois pretendo postar um post resumindo um pouco o jQuery.
Nota 10
@klauss
mas estamos na espera dos seus posts!
Grande Klauss, obrigado pelo post, tive que dar uma parada no jQuery porque tô tendo que me dedicar ao trabalho de conclusão mas assim que terminar voltarei aos estudos
Estou tentado retornar com um alert. Como poderia fazer
Fala Diego!
Primeiramente obrigado pela visita ao post, note a linha 15 do script jQuery
Ele seta ao #retorno um texto que recebe como parametro os dados do script php.
Então é só colocar o parametro data no alert que ele retornará as respostas conforme deseja, mais dúvidas é só falar que estamos aí pra isso! abraços!
Olá, muito obrigado pelo script.
Mas como faço para checar se a resposta foi positiva e então apagar os dados de post?
Obrigado.
Att.
@Triplo X Opa! obrigado Triplo X, todo tratamento do post e a lógica vc faz no PHP normal a única coisa que vai mudar é como vc vai enviar a mensagem para o script PHP. Espero que tenha esclarecido! qualquer coisa estamos aê abraços!
Excelente seu trabalho.
Mas uma pergunta: Existe a possibilidade de usar dois $.post na mesma página e permitir que esta não seja recarregada?
Por exemplo, vamos supor que há um input com auto sugestão preenchida por onkeyup mapeado por um $.post (x.php …).
Suponha também um botão para processar o primeiro input que ao ser acionado chama outro $.post.
Em ambos os casos apenas as divs criadas para tratar os resultados devem ser alteradas.
Obrigado,
Di
.
Opa! Diplo, primeiramente obrigado pelo elogio e pela visita ao meu post, desculpa a demora para responder é que realmente ultimamente estou sem tempo!
eu não entendi muito bem o propósito de usar mais de um $.post em uma mesma página! poderia explicar melhor? ou desenha pra mim que eu entendo! 
Gabriel valeu mesmo! Não sabe quanto eu procurei por algo assim. É de desenvolvedores assim que a comunidade de Programadores precisa.
Obrigado.
Stanley! primeiramente muito obrigado por visitar o meu post, fico muito grato pelo elogio, serve como incentivo, pois o intuito é sempre ajudar! e que bom que lhe foi útil, abraços!