O que é JSON?

JSON ou JavaScript Object Notation é um formato de texto para serialização de estrutura de dados. Ela é derivada de objetos literais do Javascript, como definido  no ECMAScript Programming Language Standard, Third Edition [ECMA].

JSON pode representar quatro tipos primitivos (strings, números, valores booleans e valores nulos) e dois tipos estruturados (objetos e arrays).

- Bem isso é o que diz a especificação “RCF 4627 application/json”

Um exemplo de JSON é:

{"id_categoria":"2","tipo":"PRODUTOS","titulo":"COLECOES","descricao":"MACIO TESTE"}

Se você ainda não está familiarizado com a estrutura do JSON recomendo fortemente a dar uma passada no site oficial

Bem.. vamos esclarecer algumas coisas.

• Quando utilizar JSON?
  Digamos que você tenha um código Ajax que faz uma requisição com parâmetros via POST ou GET para uma página externa, e essa página externa retorna dados dos quais você tem que tratar. Esse é um bom lugar para os dados serem retornados com JSON
• O cabeçalho da resposta da página externa precisa retonar o MIME do tipo “Content-type: application/json”  (não é obrigatório mas é bom seguir a regulamentação)
• O JSON é suportado por diversas linguagens, como PHP, C#, C, Lua, JavaScript é claro e diversas outras.
• JSON utiliza UTF-8 (somente e pronto. Nada de iso-8859 e etc. assim como no ajax)

Qual o objetivo desse post?

O meu objetivo aqui é mostrar como você pode recuperar dados JSON de uma fonte externa e usa-los no seu script com JQuery.

Normalmente, você tem uma linguagem dinâmica que busca dados no banco de dados ou seja lá o que for e retorna os dados em JSON.

Você com seu lindo script Ajax quer retornar esses dados e mostrar para o usuário sem precisar recarregar a página.

Para isso vamos supor que uma página PHP retorne o seguinte JSON.

{"id_categoria":"2","tipo":"PRODUTOS","titulo":"COLECOES","descricao":"MACIO TESTE"}

Aqui temos, um objeto JSON com 4 membros:

• Membro “id_categoria” com o valor “2″
• Membro “tipo” com o valor “PRODUTOS”
• Membro “titulo” com o valor “COLECOES”
• Membro “descricao” com valor “MACIO TESTE”

Não vou retratar aqui como o PHP ou o C# retorna dados JSON, mas dê uma olhada em “LINKS” no final da página, para mais informações.

Agora vamos usar o método $.getJSON() do JQuery para manipular os dados, a sintax é:

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

• URL -> A url que vai ser requisitada (obrigatório)
• [data] -> dados a serem enviados via POST (opcional)
• [callback] -> Função que vai ser executada quando os dados forem carregados com sucesso (opcional)

Supondo que temos 3 INPUT do tipo TEXT e queremos colocar esses dados dentro deles, as IDs desses INPUT são respectivamente:

1. id_categoriaUdt
2. tipoUdt
3. tituloUdt
4. descricaoUdt

A página a ser requisitada se chama categoria.php:

$.getJSON("../actions/admin/categoria.php", function(json){
            $('#tipoUdt').val(json.tipo);
            $('#tituloUdt').val(json.titulo);
            $('#descricaoUdt').val(json.descricao);
            } // fim do callback
); // fim do .getJSON()

Simples assim.

pronto, você pode manipular o resultado de retorno, nesse caso “json” como um objeto javascript.

val() é também um método JQuery, utilizado nesse caso para atribuir um valor ao INPUT do nosso FORM HTML

Este foi um exemplo muito simples, apenas uma introdução a como manipular objetos JSON com JavaScript (JQuery).

Boa Sorte!

- Links

• Página Oficial do JSON -> json.org
• Documentação do $.getJSON() -> docs.jquery.com
• Usando JSONRequest -> json.org
• Função eval() do JavaScript -> w3schools.com
• Usando JSON com PHP -> php.net
• Usando JSON com C# -> msdn.microsoft.com
  Ou procure no Object Browser do Visual Studio

Essa semana tive um problema com um sistema para web feito com PHP + Ajax (Jquery) + MySQL.

As páginas estavam com a codificação européia (iso-8859-1) e o banco de dados MySQL também, o maior problema que que o ajax só trabalha com o utf-8!

Isso significa que se você passar qualquer dado de padrão europeu pelo ajax (coisa que é inevitável) quando for exibido na página (html) ele nos fará o favor de aparecer com “?” e caracteres estranhos no lugar da acentuação de língua portuguesa.

Para resolver esse problema eu fiz o seguinte:

1. Transformei todas as páginas html de iso-8859-1 para utf-8
   

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

2. Configurei a sessão do banco de dados para utilizar o UTF-8, com uma função dentro do PHP:
   

   mysql_set_charset('utf8',$link);

Agora mesmo com todas as suas tabelas do MySQL configuradas para utilizar o padrão europeu (latin1, latin1_swedish_ci), o MySQL tratará de forma transparente convertendo os Charset para você sem problemas na hora de recuperar e inserir dados.

Com isso eu já tinha matado metade dos meus problemas, mas mesmo assim alguns valores que eram retornados pelo banco de dados e eram passados pelo Ajax continuaram vindo com alguns caracteres estranhos, para isso existe uma função no php que resolveu o meu caso:

string utf8_encode  ( string $data  )

// Exemplo de uso:

echo utf8_encode($valorVariavelTeimosa);

Bem, isso deixou meu App-Web 100% português, sem gambiarras e POG’s espalhados pelo código.

Boa Sorte!

Links:
http://en.wikipedia.org/wiki/Character_encoding
http://www.php.net/manual/pt_BR/function.utf8-encode.php
http://en.wikipedia.org/wiki/Encoding