Vocabulário: arquivo = ficheiro

A utilização de JSON no intercâmbio de informações entre arquivos tem crescido exponencialmente. Dentre os fatos esta a formatação enxuta e compatibilidade entre as linguagens.

O fator decisivo para a expansão na utilização do JavaScript Object Notation foi a inclusão de uma extensão a partir do PHP 5.2 que permite a utilização das funções json_encode e json_decode.

Neste tutorial vamos criar uma página de produtos que será alimentada por dados transferidos utilizando JSON.

Será mostrado um menu com as opções de produtos. Quando um dos itens for clicado um script criado utilizando jQuery faz a comunicação com o arquivo PHP que lista as informações do produto.

Tudo acontece sem a necessidade de refresh da página.

Antes de começar a codificar vamos conhecer as funções tanto no PHP, quanto no jQuery responsáveis pelo intercâmbio dos dados.

Função getJSON

A função disponibilizada pelo jQuery para trabalhar com o formato JSON é a getJSON que trabalha com requisições GET e apresenta a seguinte sintaxe:

jQuery.getJSON( url, [data], [callback] )

O primeiro parâmetro é o endereço da página que proverá os dados. O segundo envia as variáveis para serem tratadas pela página e por último é definido o que acontece se a requisição for um sucesso.

Função json_encode

Função presente a partir da versão 5.2 do PHP retorna uma representação JSON de um valor. É importante notar que esta função só funciona com dados codificados em UTF-8. O retorno para um dado não codificado é “undefined”.

A utilização mais comum é passar uma array para ser formatada e enviada.


$produto1 = array(
"nome" => "Monitor LCD 22''",
"fabricante" => "Samsung",
"valor" => "R$ 800,00",
"texto" => "Lorem impsum amet. ",
"img" => "imagem01.jpg"
);

O resultado é:

{“nome”:”Monitor LCD 22””,”fabricante”:”Samsung”,”valor”:”R$ 800,00″,”texto”:”Lorem ipsum amet.”,”img”:”imagem01.jpg”}

O json_decode faz o inverso com o detalhe de que todo o valor recebido deve estar entre aspas.

Devidamente apresentados os elementos chave, iniciemos os trabalhos.

Estrutura Da Página

Para este exemplo foi criada uma página simples para apresentar os produtos.

Os Dados Do Produto

No arquivo PHP criamos as variáveis e enviamos os dados conforme o que for recebido via GET.


$produto1 = array(
"nome" => "Monitor LCD 22''",
"fabricante" => "Samsung",
"valor" => "R$ 800,00",
"texto" => "Ut magna urna, tincidunt nec, eleifend sit amet, auctor pretium, nisi. Suspendisse arcu enim, commodo at, facilisis in, feugiat sit amet, quam. Praesent ut lacus. Maecenas sed metus. Nulla sed urna. Donec vitae ipsum quis quam cursus porttitor. ",
"img" => "imagem01.jpg"
);

$produto3 = array(
"nome" => "Memória RAM 512MB DDR2",
"fabricante" => "Kingston",
"valor" => "R$ 150,00",
"texto" => "Ut magna urna, tincidunt nec, eleifend sit amet, auctor pretium, nisi. Suspendisse arcu enim, commodo at, facilisis in, feugiat sit amet, quam. Praesent ut lacus. Maecenas sed metus. Nulla sed urna. Donec vitae ipsum quis quam cursus porttitor. Aliquam tempus, felis in ornare congue, lacus mi consectetuer risus, sit amet luctus orci nisl at dui. ",
"img" => "imagem03.jpg"
);

As arrays criadas já tem uma estrutura reconhecível e explicita com relação as variáveis que serão manipuladas.

Se os dados são obtidos através de uma requisição ao banco de dados, é necessário criar uma array apartir deles utilizando mysql_fetch_assoc.

Verificação

Em seguida é feita uma verificação para definir qual variável será enviada.


$id = strip_tags($_GET['id']);

if ($id!=0 and is_numeric($id))
{
switch($id){
case 1:
echo json_encode($produto1);
break;
case 2:
echo json_encode($produto2);
break;
case 3:
echo json_encode($produto3);
break;
}
}

Se a variável id for diferente de zero e numérica, é utilizado o switch para verificar qual o valor e enviar uma saída com os dados referente à variável já formatados no padrão JSON.

Simples assim.

Partimos agora para a criação do arquivo javascript responsável pelos efeitos e requisição ajax.

Os Efeitos


$(function(){
$('.menu a').click(function(){
var id = $(this).attr('id');
$('.global-div img, .global-div p,h2').slideUp();
$('.global-div').append(" Carregando...");
})

O código é iniciado quando um dos menus é clicado. Uma variável recebe o id do menu que posteriormente será enviado para o arquivo PHP. A imagem, parágrafos e título do produto desaparecem com um efeito deslizante. E no lugar deles é mostrado o texto “Carregando…” para manter o usuário a par do que esta acontecendo.

A Requisição

Terminados os efeitos entra em ação a função getJSON.


$.getJSON("busca_produto.php",{id:id}, function(produto){
$('.global-div p').fadeOut();
var titulo = '

Pelo tamanho do código até parece que é um pouco complicado. Mas não se deixe iludir. É muito fácil.

É iniciada a função e passado o endereço da página para iniciar a conversação. A id capturada no início do código é passada para a variável de mesmo nome.

Quando o arquivo com os dados retorna uma resposta é iniciada a função que define a variável “produto” para recebê-los.

Nesse momento o parágrafo que informava o andamento da requisição é escondido utilizando fadeOut. O nome das variáveis criadas já dizem muito sobre o conteúdo de cada uma. E é criado todo o código HTML dos elementos.

Uma alternativa é designar um “id” para cada elemento e simplesmente modificar os atributos e valores. Ou mesmo utilizar seletores.

Vejamos um exemplo com o título do produto para entender como as informações são passadas.

O conteúdo da tag h2 é criado unindo o nome da array que recebeu os dados vindos do arquivo PHP ponto “.” o nome da variável que contém o valor. O nome das variáveis é o mesmo criado no arquivo PHP.

A última variável criada recebe o conteúdo de todas as outras variáveis e em seguida é anexada ao código da página e mostrada com um efeito de opacidade.

DOWNLOAD: Descarregue o código utilizado neste tutorial para a criação do Página de Produtos Com PHP, jQuery e JSON, em formato .zip.