Respondendo no stackoverflow

Vanildo Souto incluido em Desenvolvimento

08/03/2017 513 palavras 3 minutos

Conteúdos

Vou começar a responder a algumas dúvidas no stackoverflow e me aprofundar mais no assunto aqui.

A dúvida é esta. A idéia é sobre como criar uma tela de “loading” para um relatório, já que a execução do script é demorada.

Então vamos lá!

Nota

Todos os arquivos estão no github aqui https://github.com/vanildosouto/respondendo-stackoverflow-1

Começaremos pelo script que gera o JSON com os dados da aplicação:

dados.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


<?php

# Vamos retornar um array com os dados.

$dados = [
    0 => [
        'id' => 1,
        'nome' => 'Metal Gear Solid 3',
        'qtd' => 2,
        'valor' => 80.00
    ],
    1 => [
        'id' => 2,
        'nome' => 'Metal Gear Solid Peace Walker',
        'qtd' => 4,
        'valor' => 70.00
    ],
    2 => [
        'id' => 3,
        'nome' => 'Metal Gear Solid 2',
        'qtd' => 1,
        'valor' => 40.00
    ]
];

// Vou colocar um sleep, só pra 'simular'
// a demora no carregamento do script
sleep(3);

// Retornamos o JSON com os cabeçalhos corretos
header('Content-type: application/json');
echo json_encode($dados);

Você pode usar o servidor embutido do php para testar a aplicação, é só rodar php -S 0.0.0.0:8000 na raiz da pasta do projeto.

Ao acessar http://0.0.0.0:8000/dados.php, vai demorar 3 segundos e será retornado o JSON com os dados.

Agora vamos para a página que vai mostrar os dados em tabela.

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Relatório</title>
  </head>
  <body>
    <div class="carregando">
        Carregando...
    </div>
    <table class="relatorio">
        <tr>
            <th>ID</th><th>Nome</th><th>Quantidade</th<th>Preço</th>
        </tr>
    </table>

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $("document").ready(function (){
            $.ajax({
                'url': '/dados.php',
                'method': 'GET',
                'dataType': 'json',
                'success': function (jsonResponse) {
                    var linhas = '';
                    $.each(jsonResponse, function(key, dado) {
                        linhas += "<tr><td>" + dado.id + "</td><td>" + dado.nome + "</td><td>" + dado.qtd + "</td><td>" + dado.valor + "</td></tr>";
                    });

                    $(".carregando").hide();
                    $(".relatorio").append(linhas);
                }
            });
        });
    </script>
  </body>
</html>

Aqui temos um template padrão de HTML 5. Criei uma div com uma class carregando para mostrar uma mensagem de carregando (pode usar o que você quiser).

Criei também uma tabela com o cabeçalho.

Carrego o cdn do jquery.

Logo abaixo começo a requisição ajax, com os seguintes parametros:

url: O caminho que retorna os dados em JSON

method: Qual metodo HTTP é usado na requisição, normalmente GET ou POST.

dataType: Qual o tipo de dados espero de volta. No caso um JSON.

success: O que fazer no caso de sucesso.

Na função recebemos o JSON na variavel jsonResponse. Uso a função $.each do Jquery para iterar no JSON.

Uso a variavel linhas para guardar cada uma das linhas que retornou do JSON.

Escondo o conteudo da mensagem de carregando com .hide.

Adiciono a tabela usando o .append.

Espero ter ajudado. Qualquer dúvida usem os comentários aí embaixo.

Até mais.