Olá pessoal, me desculpem a sumida pois faculdade e trabalho é complicado mas nestas férias vou compensar. Vamos ao trabalho então, neste post vou mostrar como é simples usar a função ajax do jQuery como exemplo retornar o valor de itens de um carrinho,após ser clicado no produto.
Esta função serve para que você possa resgatar dados de uma página externa sem que tenha que recarregar (“dar refresh”)  na página aberta, um exemplo seria ao clicar em um botão “pesquisar” normalmente a página seria recarregada e mostraria o resultado, com o ajax do jQuery ao clicar apareceria uma mensagem de carregando e em seguida o resultado apareceria sem recarregar a página.
Tome muito cuidado com acentuação, aconselho a usar codificação UTF-8 para voltar valores, mas cuidado ao usar a função em excesso pois se o usuário desabilitar o javascript nada vai funcionar, recomendo para usar para coisas simples como retoranar um valor de itens no carinho, envio de e-mail, gravar dados no banco etc…
Para debugar eu uso o Plugin Firebug do Firefox, porém em sua versão mais antiga ele pode nos fornecer o caminho,  existe outros plugins de jQuery que montar um local para debugar , fique a vontade para fazer sua pesquisa.
Ok então como disse vamos criar uma página onde temos as imagens dos produtos e ao clicar nelas é adicionado ao carrinho que é mostrado em outra parte do site,  aqui vamos nós em um exemplo simples acompanhe
O estilo vou deixar da sua criatividade ok? Vamos ao HTML dos produtos veja:
<h3>Produtos</h3> <a class="produtos" rel="1"><img src="001.jpg"><div class="data">iShape - R$ 230,00</div></a> <a class="produtos" rel="2"><img src="002.jpg"><div class="data">Truck - R$ 80,00</div></a> <a class="produtos" rel="3"><img src="003.jpg"><div class="data">Super Bool steal(4) - R$ 110 ,00</div></a>
Note que coloquei um atributo “rel” que pode ser o “Id” do produto para que você possa guardar isso no banco, sessão ou um cookie. E agora o HTML do carrinho
<div class="carrinho"> Meu Carrinho <strong>Itens no carrinho: <span id="itensCarrinho">0</span></strong> </div>
Nada de mais né? Veja que coloquei um “Span” com id “itensCarrinho” para que seja atualizado, agora veja o javascript que vai se conectar com outra página,não se esqueça de chamar o jQuery
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('.produtos').click(function(){ //Pega o ID do produto var id = $(this).attr('rel'); //Pega o valor atual de itens no carrinho var itens = $("#itensCarrinho").html(); //Função ajax $.ajax({ //Tipo de envio POST ou GET type: "POST", //Caminho do arquivo que processa o carrinho url: "guardaProduto.php", //Arquvios passados via POST neste caso, segue o mesmo modelo para GET data: "carrinho="+itens+"&id="+id, //Se der tudo ok no envio... success: function(resposta){ //Colocar a resposta do aqruivo na div de intens do carrinho $("#itensCarrinho").html(resposta); alert('Item Adicionado'); } }); }); }); </script>
Agora dando uma rápida passada temos o seguinte ao clicar em um dos seletores “produtos” grava-se a variável “id” que está no atributo “rel” e pega o valor atual do carrinho (atributo “itensCarrinho”), depois usamos a função ajax para passar via POST para o arquivo “guardaProduto.php” o “ID” e a variável “carrinho” que tem o valor dos itens atuais.
Agora veja o arquivo que recebe os dados da função click:
<?php $id = $_POST["id"]; $carrinho = $_POST["carrinho"]; /* * Se for necessário use a variável $_POST["id"] * para gravar no banco de dados,vou usar apenas a variável do carrinho */ $atualiza = $carrinho+1; echo $atualiza; ?>
Veja que aqui é algo simples, você pode gravar no banco, em uma sessão,num cookie, etc.. use a criatividade de acordo com sua criatividade, veja abaixo o exemplo:
Bom é isso galera dúvidas postem ai, prometo nestas férias colocar muito mais coisas aqui, até mais!
Tweet |
Valew ajudou muito.
Que DEUS te abencoe.
Por favor, gostaria de tirar uma dúvida. Por exemplo, eu tenho uma pagina chamada index.php, dentro dessa pagina eu tenho uma div com o conteúdo carregado via load(). Eu gostaria de saber se é possÃvel e como eu faço para chamar o post via ajax() dentro dessa div? (sem recarregar todo o index.php)
Agradeço e muito sua ajuda, funcionou perfeitamente. Ao invés de utilizar o .html(resposta) eu estava utilizando o .load(resposta).
Abraço!
Adriano, acabei de ter um pequeno problema. Tenho um campo de busca que envia os dados via Ajax para a página busca.php, após isso exibe o resultado na div #conteudo. Essa é a funcao:
$(“#botao”).click(function(){
$.ajax({
type:”POST”,
url: “arquivos/busca.php”,
data:”termo=”+$(“#campo”).val(),
success:function(resposta);
alert (“Busca realizada”);
$(“#conteudo”).html(resposta);
}
})
Bem, o alert eu coloquei apenas para ilustrar o problema. Ao fazer a primeira busca o navegador exibe o alert normalmente, acontece que ao buscar outra palavra o alert é exibido 2 vezes, e se buscar novamente o alert é exibido 4 vezes; assim por diante, sempre multiplicando os alerts até o navegador travar. Voce tem noção do que pode estar ocorrendo?
Agradeço, Daniel Silva.
“Talvez seja a forma de iniciar o jQuery que esteja dando problema […]”. Essas suas palavras resolveram meu problema. Eu estava chamando a funcao mais de uma vez. Obrigado por ter oferecerido um pouco de seu tempo a me ajudar. Um grande abraço.
Olá Adriano,
Achei muito útil o seu post, e tenho certeza que tem ajudado muita gente além mim! Parabéns!
Durante o estudo surgiu uma dúvida: existe a possibilidade de chamar uma função presente no trecho PHP do mesmo arquivo que contém o código Javascript, ao invés de fazer referência à um arquivo externo ?
A idéia seria ao invés de usar
url: "guardaProduto.php",
usar:
url: "umaFuncaoLocal()",
Salve Adriano!
Otimo Tutorial, me ajudou em uma loja que estava fazendo.
Agora gostaria de uma ajudinha sua, tem como adptar este codigo em um formulario para cadastro de produtos dentro de uma pagina de orçamento?
Obrigado.
Boa Tarde Adriano,
Obrigado pela resposta.
Isso mesmo quero inserir os produtos sem atualizar a pagina depois no final na hora de gravar o Orçamento que ele vai reccaregar a pagina.
Para Ficar melhor como tenho hoje Segue a Imagem:
http://www.hardlinux.srv.br/orçamento.png
A parte de programação que fico meio perdido, pois preciso que estes produtos sejão inseridos como formulario para poder jogar para o banco de dados.
Obrigado.
Bom dia,
Caros amigos como eu faria para gravar em uma sessão do php?
Grato
boa amigo, mais eu estou com um servidor apache do eazyphp e quando uso o seu exemplo aparece esse erro:
XMLHttpRequest cannot load file:///C:/Program%20Files%20(x86)/EasyPHP-12.1/www/guardaProduto.php. Origin null is not allowed by Access-Control-Allow-Origin.
sabe se tem alguma coisa que eu posso fazer para corrigir isso?
Adriano, seu post ajudou muito.
Além de ir fazendo a contagem, como faço para ir salvando os dados do produto em sessão (nome, quantidade, valor) e também mostrar um total?
Parabéns, é muito bacana ver pessoas assim , que separam parte do seu tempo, para ensinar de graça a outras pessoas que sequer conhece, que Deus te ilumine muito e sempre. Tenho 50 anos, e gostaria de aprender mais sobre como fazer um site, entrei no youtube, e um rapaz chamado Hugo Vasconcelos,tem umas aulas ensinando, ele disse lá que temos que aprender HTML 5 , AJAX, CSS 3 , PHP , JAVA SCRIPT , JQUERY, BCO DE DADOS E MYSQL. E NA BUSCA DO AJAX encontrei esta sua pagina. Mais uma vez, muito obrigado.
Olá Adriano, não sei se você ainda está respondendo aqui, por ser um post antigo (rezo para que sim…rs) mas estou com uma dúvidas a uns 3 dias e talvez você possa me ajudar.
eu tenho uma pagina pagina01.php que traz uma informação de uma linha, de uma página externa pagina02.php, da seguinte forma:
pagina01.php:
$(“#inf”).load(“pagina02.php”);
até ai tudo certo, eu gostaria de saber como faço para guardar a informação que é retornada em uma variável? Para que eu possa trabalhar com ela na página.
Obrigado Adriano, é ficou meio complicado mesmo…rs
Acho que se eu ilustrar melhor o meu problema, talvez eu consiga fazer de uma maneira melhor .O cenário é o seguinte:
Eu preciso capturar o “ip real” do computador do usuário, sei que com php eu consigo fazer isso facilmente, o problema é que estou trabalhando em um site com asp classico, ai oq eu fiz – criei uma página php para pegar o ip (digamos que seja a pagina inf01.php) e recuperei esta informação numa pagina .asp usando o load() (digamos que esta seja a página inf02.asp). E eu estando na pagina inf02.asp preciso pegar essa informação que recebi do load() e guardar em uma variável asp.
Eu até consegui fazer agora no inicio da noite usando o window.location, eu guardo a variável recuperada em uma função e uso o window.location para recarregar a mesma página(inf02.asp) e enviar o valor. Até funcionou, o problema é que o ip do cara aparece na url, não acho isso muito legal, to tentando achar alguma solução mais viável, se você tiver alguma ideia do que posso fazer, ajudaria muito.
De qqer forma, muuuuito obrigado pelo retorno.
Boa noite, Adriano,
Como acessar o carrinho?
Obgda, Adriano!!
Ótimo tutorial!!
Tá.
Mas e pra tirar um item do carrinho?