Carregar apresentação
A apresentação está carregando. Por favor, espere
1
JSON Programação de Script
2
O que é JSON: JavaScript Object Notation.
JSON e um padrão de troca de armazenamento e troca de dados. JSON é similar ao XML porem mais compacto, mais rapido e mais simples de utilizar. E independente de plataforma e linguagem de programação.
3
Exemplo { "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }
4
Por que JSON ? Para utilização de aplicações AJAX, JSON e mais rapido e mais facil que com XML. E um formato de intercambio de dados entre tecnologias distintas.
5
Exemplo com Javascript
<!DOCTYPE html> <html> <body> <h2>JSON Object Creation in JavaScript</h2><p> Name: <span id="jname"></span><br /> Age: <span id="jage"></span><br /> Address: <span id="jstreet"></span><br /> Phone: <span id="jphone"></span><br /> </p> <script> var JSONObject= { "name":"John Johnson", "street":"Oslo West 555", "age":33, "phone":" "}; document.getElementById("jname").innerHTML=JSONObject.name; document.getElementById("jage").innerHTML=JSONObject.age; document.getElementById("jstreet").innerHTML=JSONObject.street; document.getElementById("jphone").innerHTML=JSONObject.phone; </script> </body> </html>
6
Sintaxe Dado e composto pelo conjunto nome/valor.
Dado e separado por virgula. Chaves definem o objeto Colchetes definem uma coleção Exemplo: "firstName" : "John"
7
Tipo de dados number (inteiro ou real) string (entre aspas duplas)
boolean (true or false) array (entre colchetes) object (entre chaves) null
8
Objetos Objetos do JSON são escritos entre chaves
Objetos podem contem multiplos conjuntos de nomes/valores. Exemplo { "firstName":"John" , "lastName":"Doe" }
9
Coleção Uma coleção contem vários objetos e delimitado por chaves.
{ "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }
10
Coleção Exemplo de acesso a um atributo de um objeto da coleção:
Lendo o primeiro objeto: employees[0].firstName + " " + employees[0].lastName; Alterando o atributo de um objeto: employees[0].firstName = "Gilbert";
11
Como Fazer Convertendo um JSON em formato texto em um objeto no javascript: var txt = '{ "employees" : [' + '{ "firstName":"John" , "lastName":"Doe" },' + '{ "firstName":"Anna" , "lastName":"Smith" },' + '{ "firstName":"Peter" , "lastName":"Jones" } ]}'; var obj = eval("(" + txt + ")"); obj.employees[1].firstName;
12
JSON e JQUERY Utilizaremos a função jQuery.getJSON, essa função será responsável por obter os dados contidos no nosso json. jQuery.getJSON( url, [data], [callback] ) url -> A url requisitada (parâmetro obrigatório) [data] -> dados que serão enviados via GET (parâmetro opcional) [callback] -> Função que será executada quando os dados forem carregados com sucesso (parâmetro opcional)
13
JSON e JQUERY Exemplo Fonte de dados:
{"codigo":"2","nome":“Prof. Norton ","perfil":“Professor","horario":"Noite"}
14
JSON e JQUERY $.getJSON( "data.js", function(data){
$('#nome').text(data.nome); $('#perfil').text(data.perfil); $('#horario').text(data.horario); } ); );
15
Jquery – Método POST e JSON
Na estrutura da função POST existe um parâmetro opcional que permite definir o tipo de retorno da função de callback $(selector).post(URL,data,function (data,status,xhr),dataType)
16
Parâmetro Data Type "xml" – um documento XML
"html" – texto em formato HTML "text" – uma string "script" - Runs the response as JavaScript, and returns it as plain text "json" - Runs the response as JSON, and returns a JavaScript object "jsonp" - Loads in a JSON block using JSONP. Will add an "?callback=?" to the URL to specify the callback
17
Fonte http://www.w3schools.com/json/
com-jquery/
Apresentações semelhantes
© 2024 SlidePlayer.com.br Inc.
All rights reserved.