![[logo-gigasystems]](https://www.gigasystems.com.br/themes/webdesign/images/gigasystems-webdesigner.png "Home - Gigasystems Soluções Inteligentes")
Blog
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.
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. =)
Gigasystems Login:
Informe seu e-mail abaixo para continuar!
XVeja Também:
Artigos Relacionados a categoria: Blog
![[erro-bloqueia-o-acesso-pasta-compartilhada-de-convidado-nao-autenticado-no-win-10]](https://www.gigasystems.com.br/uploads/images/2019/02/erro-bloqueia-o-acesso-pasta-compartilhada-de-convidado-nao-autenticado-no-win-10-1550077473.jpg "Erro bloqueia o acesso pasta compartilhada de convidado não autenticado no Win 10")
![[error-php-7-2-count-parameter-must-be-an-array-or-an-object-that-implements-countable]](https://www.gigasystems.com.br/uploads/images/2018/05/error-php-7-2-count-parameter-must-be-an-array-or-an-object-that-implements-countable-1526577509.jpg "Error PHP 7.2: count(): Parameter must be an array or an object that implements Countable")
![[resolver-erro-ssl-connect-instalando-sass-no-windows]](https://www.gigasystems.com.br/uploads/images/2016/12/resolver-erro-ssl-connect-instalando-sass-no-windows-1481021362.jpg "Resolver erro SSL_connect instalando SASS no Windows")
Resolver erro SSL_connect instalando SASS no Windows
06 December de 2016
![[como-instalar-certificado-ssl-https-no-wampserver]](https://www.gigasystems.com.br/uploads/images/2016/thumbnail_1459365662.jpg "Como instalar certificado SSL (https) no WampServer")
Como instalar certificado SSL (https) no WampServer
30 March de 2016
![[Quero Ver o Portfólio]](https://www.gigasystems.com.br/themes/webdesign/images/call-action.png "Quero Ver o Portfólio")
Olá, deixe seu comentário para Carregar conteúdo sob demanda com Ajax
Welington Miranda
$(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.
Julio reis
Alguem pode me dar um help
segue o link
http://sosdominios.com.br/botas/produto.html?cod=1
Murillo Torres
if($(window).scrollTop() + $(window).height() >= $(document).height() - 800){
Alex Vidal
Betinho Silva
Está dando esse erro. como corrigi?
Aloilson Santos
if ($_servidor == 'localhost'){
altera o localhost para a URL do seu site EX: google.com.br
if ($_servidor == 'google.com.br'){
Leticia Alexandre
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();
}
};
});
Marcos Martins
Obrigado Leiticia pelo comentário e sua sugestão foi adicionada no código!
Att Marcos
Alice Dev
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
Mário Gomes
Felipe
Leonardo Martins
Felipe
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?
Leonardo Martins
Felipe
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?
Marcos Martins
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.
Messias
irismar menezes
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