Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Usando a função Ajax ($.ajax) do jQuery

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.

Para que usar?

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.

Recomendações?

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…

Como debugar?

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.

Mãos a massa!

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!




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Comentários (28)

  • Fernando disse:

    Tá.

    Mas e pra tirar um item do carrinho?

  • Adriano Meira disse:

    Olá Fernando

    Cara basta você criar um novo arquivo que vai receber o post e ao invés de acrescentar (+) decremente (-) com o mesmo arquivo de acrescentar faça o decrementar:

    < ?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; /*Remove um, do valor que veio*/
        echo $atualiza;
    ?>
    
  • Souto disse:

    Valew ajudou muito.

    Que DEUS te abencoe.

  • Daniel Silva disse:

    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)

  • Adriano Meira disse:

    Olá Daniel

    Se entendi bem, você vai precisar de um arquivo por trás da index.php que vai fazer a consulta e retornar nesta div o resultado. Faça assim no botão de ação pegue todos os dados e passe para esta nova página usando o Ajax lá você vai processar os dados (consultar em banco e etc) e imprimir este valor final da instrução do PHP, depois no retorno do Ajax ( success: function(resposta){… ) você vai colocar no html desta sua div o resultado ( $(‘#sua-div’).html(resposta) ).

    Basta seguir o post que vai dar certinho, qualquer dúvida poste ai, até mais.

  • Daniel Silva disse:

    Agradeço e muito sua ajuda, funcionou perfeitamente. Ao invés de utilizar o .html(resposta) eu estava utilizando o .load(resposta).

    Abraço!

  • Daniel Silva disse:

    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.

  • Adriano Meira disse:

    Olá Daniel

    Tem como eu dar uma olhada no problema on-line ou se possível? Talvez seja a forma de iniciar o jQuery que esteja dando problema, pois pelo que me contou ele está passando mais de uma vez na função “click” do seletor “#botão”.

  • Daniel Silva disse:

    “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.

  • Adriano Meira disse:

    Olá Daniel

    Opa fico feliz em poder te ajudar, até mais.

  • Vinicius disse:

    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()",

  • Adriano Meira disse:

    Olá Vinícius

    Fico muito feliz em poder te ajudar e outras pessoas, bom sobre sua dúvida vamos a alguma considerações, a função ajax do jQuery assim como no javascript puro serve para resgatar dados de outra página, fazendo com que seu comando “rode” por de trás do que o usuário enxerga, sendo assim a função ajax serve mais para fazer este tipo de requisição, se deseja usar uma função local basta coloca-la no click ou houver do seu elemento como desejar algo assim:

    $('seu-elemento').click(function(){ umaFuncaoLocal });

    Mas se desejar a função de ajax do jQuery tem um callback ou seja depois de ler o arquivo externo processar algo, ou seja, lá onde coloco “seccess: function(){…” você pode chamar sua função local.

    Agora temos outro cenário, por exemplo se em uma página externa onde vai processar uma lsita de clientes, por exemplo, e ao clicar no nome do indivíduo chame uma função local você tem que trabalhar com o conceito de orientação de objetos, ou seja, você precisa “voltar” para a página onde iniciou o ajax. Poe exemplo nesta página onde tem a lista de clientes eu coloco a função de clicar neles e algo chamar umaFuncaoLocal() ficaria assim:

    $('lista-cliente').click(function(){
    parent.umaFuncaoLocal();
    });

    Espero ter ajudado, qualquer coisa poste ai, até mais!

  • Vitor Hugo Sampiron disse:

    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.

  • Adriano Meira disse:

    Olá Vitor

    Fico feliz em ter ajudado você, bom tem como sim, tudo depende de como você vai trabalhar esta página de orçamento, antes de programar a dica que dou é pensar em camadas, por exemplo: Na página de orçamento eu gostaria que quando clicasse em enviar não recarregasse a página, sendo assim minha página de envio vai rodar via ajax, daí é so substituir a RUl da função e na resposta colocar o que vai acontecer depois do retorno.

    Qualquer coisa poste aqui como deseja fazer nesta tela de orçamento (sua lógica) que te dou uma força na programação. Até mais!

  • Vitor Hugo Sampiron disse:

    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.

  • Junior Sabino disse:

    Bom dia,

    Caros amigos como eu faria para gravar em uma sessão do php?

    Grato

  • Adriano Meira disse:

    Olá Junior, primeiro tem que iniciar a sessão e depois declara-la, faça assim no início do seu arquivo logo após abrir o php coloque assim:

    < ?php session_start();

    Agora basta setar sua sessão como algo assim:

    $_SESSION["um-nome"] = "um valor aqui";

    Assim quando for usa-la em uma página, primeiro inicie a sessão como mencionei acima e depois use a sessão:

    echo $_SESSION["um-nome"]

  • daniel disse:

    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 Meira disse:

    Olá Daniel

    Pelo erro que vc apontou está no local do arquivo “guardaProduto.php”, no ajax ele funciona como se fosse um “require_once” do php, sendo assim você deve colocar o caminho correto para ele. No seu caso experimente retirar o “C:/Program%20Files%20(x86)/EasyPHP-12.1/www” e deixar somente a o nome do arquivo.

    Qualquer coisa manda o trecho de código para eu dar uma olhada.

    Até mais.

  • 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?

  • Adriano Meira disse:

    Olá Matheus

    A contagem é feita ao adicionar o produto veja que na instrução do PHP eu declaro que “$atualiza = $carrinho+1;” e para salvar na sessão lá no PHP basta instanciar a sessão com os dados que deseja, por exemplo:

    < ?php sessions_start(); // aqui em cima inicia o session do 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; // aqui grava a sessão com os seus dados $_SESSION["carrinho"]["produto"] = "nome do produto"; $_SESSION["carrinho"]["quantidade"] = 2; ?>

    Ali onde salva a session você pode colocar o valor que quiser passar via POST pelo ajax.

    Até mais.

  • Carlos Henrique disse:

    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.

  • Leonardo Andrade disse:

    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.

  • Adriano Meira disse:

    Olá Leonardo

    Opa to respondendo sim cara. Puxa cara se entendi bem você passa um valor recupera recupera um valor e precisa fazer uma nova consulta ou requisição em php, bom eu desconheço uma solução simples… o que pode ser feito e uma terceira pagina (pagina03.php) com vai fazer sua nova consulta com base no resultado da segunda pagina (pagina02.php), e ai a primeira página (pagina01.php) é uma ponte entre suas consultas de php, e você vai tratando os resultados para chamar novas páginas de acordo com seu código. Pois é não conheço uma técnica mais simples….

    Existe a função $_SESSION mas o navegador não vai interpretar nada sem ser recarregado… o PHP só trabalha com renderização de código no ato da leitura o Javascript pode fazer mudanças depois de renderizado (pelo DOM dos elementos).

    Até mais!

  • Leonardo Andrade disse:

    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.

  • Luis disse:

    Boa noite, Adriano,

    Como acessar o carrinho?

  • Adriano Meira disse:

    Olá Luis

    Neste exemplo fiz apenas uma demostração de como atualizar via ajax os eu carrinho, no arquivo “guardaProduto.php” vocE~pode trabalhar mais no PHP para salvar em sessão e no botão lá em cima abrir uma nova janela que recupera essas sessões e mota o looping do seu carrinho.

    Até mais!

  • Maira disse:

    Obgda, Adriano!!
    Ótimo tutorial!!

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...