PHP

Em por

No artigo de hoje, ensinarei a vocês um efeito muito útil e muito utilizado principalmente nas redes sociais como o Facebook, na qual a página carrega dados do Banco de Dados dinamicamente conforme você vai descendo o scroll da página.

Carregar conteúdo sob demando com Ajax

Banco de Dados

Primeiramente iremos criar nosso BD para exemplo, e logo após criaremos nossa tabela.

 CREATE TABLE IF NOT EXISTS `cidade` ( `idCidade` int(11) NOT NULL AUTO_INCREMENT, `idEstado` int(11) NOT NULL, `nomeCidade` varchar(50) COLLATE utf8_unicode_ci NOT NULL, PRIMARY KEY (`idCidade`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=9715 ;

Depois de criada nossa tabela, vamos popular ela. Ao final do post disponibilizarei os arquivos para download na qual, terá um arquivo SQL para você fazer as inserções das cidades, disponibilizada pelo IBGE para nosso exemplo e mais, com 7 (sete) dígitos conforme exigência para gerar Nota Fiscal Eletrônica.

Após nosso BD estar criado e populado, vamos criar nossa pagina índex.php, que será a responsável para mostrar os dados vindos do BD.

 <!DOCTYPE HTML> <html lang="pt-BR"> <head> <meta charset="utf-8" /> <title>Plataforma de Gerenciamento de TCC</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> </head> <body> <div id="content"></div> <div id='loading'></div> </body> </html>

Ajax

Criado nosso arquivo HTML, vamos inserir nosso JavaScript para fazer a requisição Ajax.

 <script type="text/javascript"> //variavel para controle de registros retornados var pagina = 0; //function carrega function carrega(){ $('#loading').html("<img src='img/loader.gif'/> Carregando Feeds...").fadeIn('fast'); $.ajax({ type: "POST", url: "loadAjax.php", data: "page="+pagina,//variavel passada via post cache: false, success: function(html){ $('#loading').fadeOut('fast'); $("#content").append(html);//mostra resultado na div content }, error:function(html){ $('#loading').html("erro...").fadeIn('fast'); } }); }; //chama minha funcao ao carregar a pagina $(document).ready(function(){ carrega(); }); //funcao de controle do scroll da pagina, na qual ela chega ao fim é acionada chamando //minha function carrega novamente para trazer mais dados dinamicamente $(window).scroll(function(){ if($(window).scrollTop() + $(window).height() >= $(document).height()){ pagina += 1; carrega(); }; }); </script>

Nesse trecho de código, criamos uma função chamada carrega(), onde ela é a responsável por trazer os dados dinamicamente com o uso do Ajax.

AJAX é carregar e renderizar uma página, utilizando recursos de scripts rodando pelo lado cliente, buscando e carregando dados em background sem a necessidade de reload da página.

Nessa função, passamos nossa variável via POST para uma pagina chamada loadAjax.php, que será a responsável por receber a variável e fazer a conexão com nosso método, fazer a conexão com o BD e trazer os dados para tela.

Criamos uma função ready() abaixo para que quando a página carregar no navegador, ele chame a função de imediato.

Por fim, criamos uma função scroll() que será a responsável por verificar o scroll da pagina e fazer a requisição de nossa função carrega() quando o scroll da pagina chegar ao fim, fazendo assim com que traga mais resultados para nossa tela, toda vez que nosso scroll chegar ao fim da tela.

Agora vamos criar nossa página chamada loadAjax.

 <?php //adiciono meu arquivo de functions require_once('includes/functions.php'); //recebo via post minha variavel enviada pelo ajax $page = $_POST['page']; //defino a quantidade de registro trazidos a cada pesquisa $qntd = 45; //defino a partir de qual registro ele começa a buscar $inicio = $qntd * $page; //instacio minha classe $Wall = new Wall_Updates(); //chamo meu método passando as variaveis de controle da query e guardo numa variavel $updatesarray = $Wall->UpdatesAjax($inicio,$qntd); //se houve registros retornados entra no if if(count($updatesarray)){ foreach($updatesarray as $data){ //percorre o array e joga na tela seu valor até seu final ?> <li><?php echo $data['nomeCidade'];?></li> <?php } }else{ //caso não haja mais registros retornados echo "Final de arquivo..."; } ?>

Ela é a responsável por receber nossa variável da pagina índex.php e fazer o controle de inicio e fim de nossa query, para que ao realizar a consulta, não traga dados repetidos ou faltando.

Feito os cálculos de inicio e fim, ela passa nossas variáveis para nosso método em uma página chamada functions, na qual essa página é a responsável por fazer a conexão com o BD diretamente e retornar um array de resultados.

Após recebermos nosso array como resultado, percorremos ele, e imprimimos seu valor na tela até o final do array.

Assim todos os dados pesquisados são impressos na nossa índex.php e a cada vez que nosso scroll chegar ao fim, ele repete todo o processo.

Para baixar o exemplo completos com os scripts e o SQL CLIQUE AQUI...

Para baixar o SQL da tabela do IBGE de cidades com 7 digitos CLIQUE AQUI...

Dúvidas, críticas ou sugestões comentem abaixo que teremos o prazer em lhe ajudar. laugh

Veja Também:

Artigos Relacionados a categoria: PHP

Olá, deixe seu comentário para Carregar conteúdo sob demanda com Ajax

Já temos 8 comentário(s). DEIXE O SEU :)
Messias

Messias

Olá, tem loop no seu código, quando os registros acabam fica carregando, e mostra varios final de arquivo.
★☆☆☆☆ DIA 02.02.15 23h02 RESPONDER
N/A
Enviando Comentário Fechar :/
Felipe

Felipe

Meus parabéns pelo tutorial

Segui os passos e consegui implementar na minha aplicação Localhost, no entanto, quando publiquei online ele deu o erro, foi para essa linha

error:function(html){
$('#loading').html("erro...").fadeIn('fast');
}

O que pode ser o problema?
★☆☆☆☆ DIA 11.03.15 11h03 RESPONDER
N/A
Enviando Comentário Fechar :/
Marcos Martins

Marcos Martins

Felipe, se deu certo no localhost, era pra funcionar no servidor também, salvo quando os dois trabalham com versões similares ou iguais. Esse erro como muitos têm dúvidas e ao contrário que muitos pensam, é porque ele nem chegou onde (caminho) teria que chegar. Isso pode acontecer por caminho errado, não foi possível se conectar com o servidor, senha errada, esse tipo de coisa.

Se ele conseguiu chegar no arquivo final, geralmente onde fazemos procedimento com BD, ele retorna para o success e nunca para o error.

Não sei se você usa caminho absoluto, mas verifica se o caminho para seu arquivo é o mesmo que local, pois na maioria dos casos local é WINDOWS e servidor é LINUX, portanto são caminhos diferentes.
★☆☆☆☆ DIA 11.03.15 14h03 RESPONDER
N/A
Enviando Comentário Fechar :/
Felipe

Felipe

Marco, bom dia!

Consegui identificar a origem do problema e foi falha na minha programação. Fiz o debug no código e vi que estava dando erro 500 e então realizei o ajuste e agora está tudo 100%.

Aproveitando o comentário, com esse algorítimo é possível colocar um botão para carregar mais ao invés de deixar ele automático?
★☆☆☆☆ DIA 12.03.15 10h03 RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Boa tarde Felipe, sim é possível sim, basta você modificar o modo como chama a função de $(window).scroll(function() para $('#seuBotao').click(function(), e dentro desta função apenas chamar a função carrega(), ai toda vez que você clicar no seu botão ele dispara a requisição fazendo carregar o conteúdo.
★☆☆☆☆ DIA 16.03.15 16h03 RESPONDER
N/A
Enviando Comentário Fechar :/
Felipe

Felipe

Muito obrigado, já implementei nos conteúdos do site. Funcionando perfeitamente!!!
★☆☆☆☆ DIA 18.03.15 08h03 RESPONDER
N/A
Enviando Comentário Fechar :/
Leonardo Martins

Leonardo Martins

Legal Felipe, foi um prazer poder ajudar...
★☆☆☆☆ DIA 20.03.15 13h03 RESPONDER
N/A
Enviando Comentário Fechar :/
Mário Gomes

Mário Gomes

Meus parabéns, eu estava perdidinho em como fazer isso funcionar, graças a esse post consegui desenrolar e fazer alterações bem legais.
★★★★★ DIA 22.08.16 14h54 RESPONDER
Leonardo Martins
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

...AINDA NÃO VIU NOSSO PORTFÓLIO?

Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite e veja agora mesmo e tenha um site de qualidade para o seu negócio!

[contato]
Ver o Portfólio Agora