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:

2. Conexão (conn.php)

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

3. Estrutura (index.php)

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

  • 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):

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

  • 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:

  • 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.