Carregamento dinâmico de registros com PHP/JQuery/AJAX

AJAX, JQuery, PHP 84.971 visualizações

Olá pessoal, tudo certo? O artigo de hoje foi baseado em uma sugestão que achei interessante. Trata-se de um carregamento dinâmico de registros, assim como no twitter que, em nossa home, quando clicado em “more” ele nos traz mais tweets. Outro exemplo é o formspring.me que quando clicado em “more” ele nos traz mais perguntas. No nosso caso, iremos utilizar frases como exemplo.

Confira o resultado final, clicando aqui.

1. Banco de dados

Como sempre, vamos criar nossa tabela no banco de dados e incluir alguns registros de exemplo:

-- Estrutura da tabela `frases`
CREATE TABLE IF NOT EXISTS `frases` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `texto` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
  `autor` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=13;

-- Extraindo dados da tabela `frases`
INSERT INTO `frases` (`id`, `texto`, `autor`) VALUES
(1, 'A imaginação é mais importante que o conhecimento.', 'Albert Einstein'),
(2, 'O mundo não está ameaçado pelas pessoas más, e sim por aquelas que permitem a maldade.', 'Albert Einstein'),
(3, 'Tente mover o mundo - o primeiro passo será mover a si mesmo.', 'Platão'),
(4, 'Os homens erram, os grandes homens confessam que erraram.', 'Voltaire'),
(5, 'Só os mortos conhecem o fim da guerra.', 'Platão'),
(6, 'Duas coisas são infinitas: o universo e a estupidez humana. Mas, no que respeita ao universo, ainda não adquiri a certeza absoluta.', 'Albert Einstein'),
(7, 'Se minha Teoria da Relatividade estiver correta, a Alemanha dirá que sou alemão e a França me declarará um cidadão do mundo. Mas, se não estiver, a França dirá que sou alemão e os alemães dirão que sou judeu. ', 'Albert Einstein'),
(8, 'Educai as crianças, para que não seja necessário punir os adultos.', 'Pitágoras'),
(9, 'Não existem métodos fáceis para resolver problemas difíceis.', 'René Descartes'),
(10, 'A natureza fez o homem feliz e bom, mas a sociedade deprava-o e torna-o miserável.', 'Jean Jacques Rousseau\r\n'),
(11, 'Muitos odeiam a tirania apenas para que possam estabelecer a sua.', 'Platão'),
(12, 'Os homens dizem que a vida é curta, e eu vejo que eles se esforçam para a tornar assim.', 'Jean Jacques Rousseau');

2. Conexão (conn.php)

Vamos criar nosso arquivo que será responsável pela conexão com o banco de dados:

<?php
// Informações para conexão
$host = 'localhost';
$usuario = 'root';
$senha = 'senha';
$banco = 'banco';
// Realizando conexão e selecionando o banco de dados
$conn = mysql_connect($host, $usuario, $senha) or die(mysql_error());
$db = mysql_select_db($banco, $conn) or die(mysql_error());
// Definindo o charset como utf8 para evitar problemas com acentuação
$charset = mysql_set_charset('utf8');
?>

3. Estrutura (index.php)

Agora iremos montar a estrutura inicial de nossa página:

<?php require_once('conn.php') ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Carregamento dinâmico de registros</title>
</head>

<body>

<div id="frases">
    <?php
    // Selecionando as três últimas frases cadastradas
    $query = mysql_query('SELECT * FROM frases ORDER BY id LIMIT 0,3');
    // Exibindo frases selecionadas
    while ($frase = mysql_fetch_object($query))
        echo "<p lang='{$frase->id}'>\"{$frase->texto}\" <br /> <em>{$frase->autor}</em></p>";
    ?>
</div>

<span id="status"></span> <a href="javascript:func()" id="mais">Mais frases »</a>

</body>
</html>
  • Linha 1: Incluímos o arquivo de conexão;
  • Linha 16: Selecionamos as últimas três frases cadastradas em nossa tabela;
  • Linha 18 e 19: Passamos por cada frase e então exibimos seu texto e autor dentro de um parágrafo (p). Colocamos o id dessa frase dentro da propriedade LANG;
  • Linha 23: Criamos um elemento (span) com ID igual a “status” onde será colocado o loader. Logo adiante criamos um link que será responsável por buscar mais frases.

Portanto, todas as frases estão dentro de uma DIV com ID igual a “frases” e cada parágrafo (p) dentro dessa DIV representa uma frase.

4. jQuery

Agora iremos baixar a última versão do jQuery. Depois de baixado, basta incluí-lo em nossa página (de preferência no cabeçalho):

<script type="text/javascript" language="javascript" src="js/jquery.js"></script>

Incluído o jQuery, vamos ao nosso código:

<script type="text/javascript" language="javascript">
    $(function($) {
        // Quando clicando em "Mais frases"
        $("#mais").click(function() {
            // Recuperamos o id da última frase selecionada, que foi armazenado na propriedade LANG
            var ultimo = $("#frases p:last").attr("lang");
            // Mensagem de carregando
            $("#status").html("<img src='image/loader.gif' alt='Enviando' />");
            // Faz requisição ajax e envia o ID da última frase via método POST
            $.post("ajax/buscar.php", {ultimo: ultimo}, function(resposta) {
               // Limpa a mensagem de carregamento
               $("#status").empty();
               // Coloca as frases na DIV
               $("#frases").append(resposta);
            });
        });
    });
</script>
  • Linha 4: Quando clicado no nosso link “Mais frases” que tem como ID “mais”;
  • Linha 6: Recuperamos o valor da propriedade LANG do último parágrafo (p:last), ou seja, recuperamos o id da última frase selecionada;
  • Linha 8: Colocamos na DIV “status” a imagem do nosso loader;
  • Linha 10: Fazemos a requisição com nosso arquivo buscar.php e passamos, através do método POST o id da última frase selecionada;
  • Linha 12: Quando terminado a requisição, limpamos a DIV “status”, através do método empty(), ou seja, removemos o loader;
  • Linha 14: Colocamos cada frase retornada na DIV “frases”, logo após o conteúdo já existente, por isso utilizamos o método append().

5. PHP (ajax/buscar.php)

Por último, vamos ao arquivo responsável por buscar as frases, a partir da última já exibida:

<?php
// Conexão
require_once('../conn.php');

// Recuperando informações
$ultimo = (int) $_POST['ultimo'];

// Selecionando mais três frases, a partir da última
$query = mysql_query("SELECT * FROM frases WHERE id < {$ultimo} ORDER BY id DESC LIMIT 0,3");

// Retornando frases
while ($frase = mysql_fetch_object($query))
    echo "<p lang='{$frase->id}'>\"{$frase->texto}\" <br /> <em>{$frase->autor}</em></p>";
?>
  • Linha 3: Incluímos o arquivo de conexão;
  • Linha 6: Recuperamos o id da última frase selecionada, passado através do método POST;
  • Linha 9: Selecionamos apenas as frases que tem um id menor que o da última, ordenados em ordem decrescente e apenas os três primeiros resultados (LIMIT 0,3);
  • Linha 12 e 13: Passamos por cada frase e então exibimos seu texto e autor dentro de um parágrafo (p). Colocamos o id dessa frase dentro na propriedade LANG, seguindo a mesma estrutura da página inicial.

6. Conclusão

Bom pessoal, por hoje é isso. Vimos mais uma vez a facilidade de manipular os elementos de nossa página com jQuery. Espero que vocês tenham gostado.

Download dos arquivos

Abraços.

Publicado por Rafael Couto

Published