Material Didático

Cursos / Informática para Internet / Desenvolvimento Web II / Aula

Aula 08 - jQuery (Parte 2)

Métodos – AJAX pt.3

Dando continuidade a conversão do código visto em aulas anteriores, iremos prosseguir incluindo os novos recursos ensinados (arquivo json_jQuery2.jsp):

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
   pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
    <title>JSON+jQuery 2</title>
  </head>
  <body>

$(document).ready(onLoad);

var jsonObj = null;
       var livro = null;

function onLoad() {
         $("#livros").click(carregarLivro);
           $.getJSON("livros.json.jsp", function(dados){
           jsonObj = dados;
           carregarLista();
           });
       }

function carregarLista() {
         var livros = jsonObj.livros.livro;
         for ( var i = 0; i < livros.length; i++) {
           var livro = livros[i];
           var campoLivro = document.getElementById("livros");
           campoLivro.options[campoLivro.length] = new Option(livro.nome, ""
               + i);
         }
       }

function carregarLivro() {
         
         var indice = $("#livros").val();
         var livros = jsonObj.livros.livro;
         var livro = livros[indice];

$("#nome").html(livro.nome);
         $("#isbn").html(livro.isbn);

$("#editora").html(livro.editora);
         $("#edicao").html(livro.edicao);
         $("#preco").html(livro.preco);

var autoresStr = "";
         var autores = livro.autores.autor;
         for ( var i = 0; i < autores.length; i++) {
           if (i > 0) {
             autoresStr += " | ";
           }
           autoresStr += autores[i];
         }
         $("#autores").html(autoresStr);
         $("#sinopse").html(livro.sinopse);
         $("#divLivroSelecionado").attr("style", "");
       }
    </script>
    <br>
    <select id="livros" size="2">
    </select>
    <br>

<div id="divLivroSelecionado" style="visibility: hidden;"><br>
      <table border="1" width="60%">
         <tr>
           <td width="20%">Nome:</td>
           <td id="nome"></td>
         </tr>
         <tr>
           <td>ISBN:</td>
           <td id="isbn"></td>
         </tr>
         <tr>
           <td>Editora:</td>
           <td id="editora"></td>
         </tr>
         <tr>
           <td>Edição:</td>
           <td id="edicao"></td>
         </tr>
         <tr>
           <td>Autor(es):</td>
           <td id="autores"></td>
         </tr>
         <tr>
           <td>Preço:</td>
           <td id="preco"></td>
         </tr>
         <tr>
           <td colspan="2">Sinopse:</td>
         </tr>
         <tr height="100">
           <td colspan="2" id="sinopse"></td>
         </tr>
      </table>
    </div>

</body>
</html>

Notas

Linha 21: utilizamos a função 'getJSON' da API do jQuery para recuperar dados no formato JSON do servidor. A assinatura da função é:
- getJSON( url, [ dados ], [ callback(dados, textStatus) ] );
- o segundo e terceiro parâmetros são opcionais.
Linha 60: utilizamos o método 'attr' para definir o valor do atributo 'sytle' do elemento 'divLivroSelecionado'.

Veja a seguir o arquivo JSON carregado do servidor (arquivo livros.json.jsp):

<%response.setContentType("application/x-javascript; charset=utf-8");%>
{
     "livros":{
         "livro":[
             {
                 "nome":"A Cabana",
                 "isbn":8599296361,
                 "editora":"SEXTANTE FICÇAO",
                 "edicao":"1ª Edição - 2008",
                 "autores":{
                     "autor":["YOUNG, WILLIAM P."]
                 },
                 "preco":"12,45",
                 "sinopse":"A filha mais nova de Mackenzie Allen Philip foi raptada durante as férias em família e há evidências de que ela foi brutalmente assassinada e abandonada numa cabana. Quatro anos mais tarde, Mack recebe uma nota suspeita, aparentemente vinda de Deus, convidando-o para voltar àquela cabana e passar o fim de semana. Ignorando alertas de que poderia ser uma cilada, ele segue numa tarde de inverno e volta ao cenário de seu pior pesadelo. O que encontra lá muda sua vida para sempre."
             },
             {
                 "nome":"A Ilha Sob o Mar",
                 "isbn":8528614441,
                 "editora":"BERTRAND BRASIL",
                 "edicao":"1ª Edição - 2010  ",
                 "autores":{
                     "autor":[
                         "ALLENDE, ISABEL",
                         "SEGUNDO AUTOR"
                     ]
                 },
                 "preco":"12,45",
                 "sinopse":"O romance narra a vida de Zarité, a escrava que foi vendida aos nove anos de idade para o francês Toulouse Valmorain, dono de uma das maiores plantações de cana-de-açúcar nas Antilhas. Como escrava doméstica, ela não padeceu as dores e as humilhações de seus iguais, mas conheceu as misérias de seus patrões – os brancos. "
             }
         ]
     }

}

Termo de uso

arrow_back Aula 08 - jQuery (Parte 2)

Métodos – AJAX pt.3

Notas

Aula 08 - jQuery (Parte 2)