json160O 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

Posts Relacionados

Imprimir Post Imprimir Post