Artigo: Carregar conteúdo sob demanda com Ajax - Gigasystems

Blog

Em por

carregar-conteudo-sob-demanda-com-ajax
Carregar conteúdo sob demanda com Ajax

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;
var pesquisa = true; // dica da Leticia Alexandre para resolver problema no loop no final //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){ if(html){ $('#loading').fadeOut('fast'); $("#content").append(html); //mostra resultado na div content pesquisa = true; }else{ //Criando um relatório PDF com PHP $('#loading').html("Fim da pesquisa...").fadeIn('fast'); pesquisa = false; } }, 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. =)

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

Já temos 19 comentário(s). DEIXE O SEU :)
Welington Miranda

Welington Miranda

Ola pessoal tenho um script em java muito simples, USO em PHP OO

$(document).ready(function () {

var page = 5;
var start = 0;
var startLoad = 0;

if (page == 0) {
LoadCarousels();
startSite();
}


function LoadCarousels() {
var
dados = {
page: page, //-> palavra no POST
start: start //->isso diz ao LIMIT da sua QUERY de onde deve iniciar a busca, evita multiplicar itens no append.
};

$.post('../../mginx/AppLoad/', dados, function (retorna) {
if (retorna) {
$('#medias').append(retorna);
startSite(); //seu js que deve ser iniciado apos append
page += 5;

} else {
$('#medias').html('Erro, À Pagina não pode ser carregada.');
}
});
return false;
}

$(window).scroll(function () {

if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
start = $('.owl-carousel').length++;
LoadCarousels();
}
;

});

});


PHP OO

//Controller Exemplo
class AppLoad {

private $Dados;
private $page;
private $start;

public function index() {
$this->page = filter_input(INPUT_POST, 'page');
$this->start = filter_input(INPUT_POST, 'start');
//echo $this->PesqUsuario . "";

$this->loadCarousels();

}

private function loadCarousels() {

$media_type = new \sts\Models\StsMediaType();
$this->Dados['medias_types'] = $media_type->Listing($this->page, $this->start);

$home_medias = new \sts\Models\StsMedias();
$this->Dados['medias'] = $home_medias->Listing();

$medias_content = new \sts\Models\StsMediaContent();
$this->Dados['medias_content'] = $medias_content->Listing();



$carregarView = new \Core\ConfigView("sts/Views/AppLoad/AppLoad", $this->Dados);
$carregarView->renderAppLoad();
}

}

PHP OO

//Models Exemplo

class StsMediaType {

private $Result;
private $page;
private $start;


public function Listing($page = null, $start = null) {


$Listing = new \sts\Models\helper\StsRead();
//$Listing->exeRead('carousel_post');
$Listing->fullRead("SELECT id type_id, name type_name
FROM sts_type_medias WHERE adms_situactions_id=1 LIMIT $start, $page");
$this->Result['medias_types'] = $Listing->getResult();
return $this->Result['medias_types'];
}

}

Galera foi so um exemplo em PHP OO pra quem tem duvida.
★★★★★DIA 20.09.20 02h34RESPONDER
N/A
Enviando Comentário Fechar :/
Julio reis

Julio reis

Ola estou adaptando o codigo em uma pagina e tudo funciona perfeitamente, mas quando rolo o scrool do mouse aparece novamente o mesmo conteúdo e se repete infinitamente
Alguem pode me dar um help
segue o link
http://sosdominios.com.br/botas/produto.html?cod=1
★★★★★DIA 04.07.20 09h51RESPONDER
N/A
Enviando Comentário Fechar :/
Murillo Torres

Murillo Torres

Alterei o código para carregar um pouco antes do final da minha página.
if($(window).scrollTop() + $(window).height() >= $(document).height() - 800){
★★★☆☆DIA 27.03.20 11h29RESPONDER
Leonardo Martins
Enviando Comentário Fechar :/
Alex Vidal

Alex Vidal

Só que ai vc vai ver mais de 800 requisição no ajax
★★☆☆☆DIA 13.05.20 16h32RESPONDER
N/A
Enviando Comentário Fechar :/
Betinho Silva

Betinho Silva

Error!: SQLSTATE[HY000] [1045] Access denied for user ''@'localhost' (using password: NO)

Está dando esse erro. como corrigi?
★★★★★DIA 07.02.20 10h01RESPONDER
N/A
Enviando Comentário Fechar :/
Aloilson Santos

Aloilson Santos

na pagina conexaoClasse.php na linha
if ($_servidor == 'localhost'){
altera o localhost para a URL do seu site EX: google.com.br
if ($_servidor == 'google.com.br'){
★★★★★DIA 01.10.21 10h34RESPONDER
N/A
Enviando Comentário Fechar :/
Leticia Alexandre

Leticia Alexandre

Primeiro Obrigada pelo artigo, funcionou muito bem de acordo com a minha necessidade. Esse artigo foi a melhor explicação prática que eu encontrei.

O Problema do loop no final eu resolvi da seguinte forma. Criei uma váriavel var pesquisa = true;
Quando o meu resultado no php for 0 (já existe esse if no código) eu retorno false e paro de pesquisar.
Espero que ajude!

PHP
}else{
//caso não haja mais registros retornados
//echo "Final de arquivo...";
return false;
}


AJAX


//variavel para controle de registros retornados
var pagina = 0;
var pesquisa = true;
//function carrega
function carrega(){
$('#loading').html(" Carregando Feeds...").fadeIn('fast');
$.ajax({
type: "POST",
url: "loadAjax.php",
data: "page="+pagina+"&limit=12&"+location.search.slice(1),//variavel passada via post
cache: false,
success: function(html){
if(html){
$('#loading').fadeOut('fast');
$("#content").append(html);//mostra resultado na div content
pesquisa = true;
}else{Criando um relatório PDF com PHP

$('#loading').html("Fim da pesquisa...").fadeIn('fast');
pesquisa = false;
}
},
error:function(html){
$('#loading').html("erro...").fadeIn('fast');
}
});
};

//chama minha funcao ao carregar a pagina
$(document).ready(function(){
if(pesquisa){
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
//carregar conforme rola a tela
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height()){
if(pesquisa){
pagina += 1;
carrega();
}
};
});
★★★★★DIA 10.07.19 10h18RESPONDER
Marcos Martins
Enviando Comentário Fechar :/
Marcos Martins

Marcos Martins

Obrigado Leiticia pelo comentário e sua sugestão foi adicionada no código!


Att Marcos

★★★★★DIA 11.07.19 13h49RESPONDER
N/A
Enviando Comentário Fechar :/
Alice Dev

Alice Dev

Como corrijo esse loop no final da página?
★★★★★DIA 28.03.18 14h52RESPONDER
Marcos Martins
Enviando Comentário Fechar :/
irismar menezes

irismar menezes

√ irismar menezes
//variavel para controle de registros retornados
var pagina =1;
var fim=;

//function carrega
function carrega(){

if(fim >= pagina){
$('#loading').html(" Carregando Anúncios...").fadeIn('fast');
$.ajax({


type: "POST",
url: "membro.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');

}
});
} };

if(fim >= pagina){
//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()-59){
pagina += 1;
carrega();
};
});
}









o que fiz foi fazr uma consulta antes ao mysql apenas para saber o numero de paginas inclusive pode ser nessa mesma enfim fica a critério no meu sistema eu tenho um index que faz um select e conferi quantos consultas da divido pelo número de consultas por paginas assim cheguei a var fim=; para quem não entendeu $paginas = ceil($registros_total / $registros);
assim posso saber se ele estar fazendo a paginação da ultima pagina assim ele para apos a ultima pagina
★★★★★DIA 25.08.2018 02h04
★★★★★DIA 25.08.18 02h06RESPONDER
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 14h54RESPONDER
Leonardo Martins
Enviando Comentário Fechar :/
Felipe

Felipe

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

Leonardo Martins

Legal Felipe, foi um prazer poder ajudar...
★☆☆☆☆DIA 20.03.15 13h03RESPONDER
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 10h03RESPONDER
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 16h03RESPONDER
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 11h03RESPONDER
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 14h03RESPONDER
N/A
Enviando Comentário Fechar :/
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 23h02RESPONDER
Marcos Martins
Enviando Comentário Fechar :/
irismar menezes

irismar menezes

//variavel para controle de registros retornados
var pagina =1;
var fim=;

//function carrega
function carrega(){

if(fim >= pagina){
$('#loading').html(" Carregando Anúncios...").fadeIn('fast');
$.ajax({


type: "POST",
url: "membro.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');

}
});
} };

if(fim >= pagina){
//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()-59){
pagina += 1;
carrega();
};
});
}









o que fiz foi fazr uma consulta antes ao mysql apenas para saber o numero de paginas inclusive pode ser nessa mesma enfim fica a critério no meu sistema eu tenho um index que faz um select e conferi quantos consultas da divido pelo número de consultas por paginas assim cheguei a var fim=; para quem não entendeu $paginas = ceil($registros_total / $registros);
assim posso saber se ele estar fazendo a paginação da ultima pagina assim ele para apos a ultima pagina
★★★★★DIA 25.08.18 02h04RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

Veja Também:

Artigos Relacionados a categoria: Blog

Soluções

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


Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite, veja agora mesmo nossos Cases de Sucesso e tenha seu site nos padrões atuais preparado para maioria dos dispositivos e navegadores.

Usamos cookies para manter o site seguro, registrar e personalizar sua navegação. Para mais detalhes sobre essa atividade, acesse nossa Politica de Privacidade

Entendi