1

Galera eu estou tentando fazer um sistema de carregamento sob demanda e eu não sei nada sobre ajax e não entendi muito bem como funcionaria.

Eu tenho um sistema de postagens que mostra uma quantidade de 10 post na minha página, e quando eu clico na minha segunda página (paginação) ele mostra mais 10 e assim até terminar meus post do banco.

O que eu queria é fazer um sistema sob demanda "Botão de carregar mais" sem ter que ir para outra página.

Meu arquivo que mostra minhas postagens

<?php
        $conexao = mysqli_connect("host", "jubileu", "1dois");
        mysqli_select_db($conexexao,"nada");

        $pagina = (isset($_GET['pagina']))? $_GET['pagina'] : 1;
        $cmd = "SELECT * FROM Banco_opa ORDER BY id DESC";
        $empresa = mysqli_query($conexexao,$cmd);
        $total = mysqli_num_rows($empresa);
        $registro = 10;
        $numPaginas = ceil($total/$registro);
        $inicio = ($registro*$pagina)-$registro;
        $cmd = " SELECT * FROM Banco_opa ORDER BY id DESC LIMIT $inicio,$registro";
        $empresa = mysqli_query($conexexao,$cmd);

        $total = mysqli_num_rows($empresa);
        while ($BancoID = mysqli_fetch_array($empresa)){echo'<div class="Post">'.$BancoID['ID'].'</div>';}
    ?>

Se alguém poder me ajudar vlw ^^

1
  • Você disse que não entendeu nada sobre Ajax, então posso tentar ajudar seu entendimento. Ajax é um esquema para, do lado do cliente, enviar uma requisição ao servidor. Essa requisição não é síncrona, ela pode acontecer a qualquer instante e precisa-se esperar a resposta do servidor. Ao se obter a resposta, faz-se um tratamento dos dados obtidos e, então, toma-se alguma ação. Por exemplo, a ação de colocar mais elementos na div com os posts Commented 25/05/2017 às 3:28

1 Resposta 1

3

Use o jQuery e faça algo como:

HTML

<div id="content"></div>
<button id="ver-mais" data-ref="2">Carregar mais...</button>

javascript

//Carrega um conteúdo inicial ao carregar a página
$(document).ready(function(){

   $.ajax({
        url: 'pagina.php',
        data: {pagina:1},
        type: 'GET',

        success: function(response){

            $('#content').html(response);
        }
   }); 
});

//Carrega um conteúdo ao clicar no botão
$(document).ready(function(){

    $('#ver-mais').click(function(){

        let proxima_pagina = $(this).attr('data-ref');

        $.ajax({
            url: 'pagina.php',
            data: {pagina:proxima_pagina},
            type: 'GET',

            success: function(response){

                $('#content').append(response);
            },

            complete: function(){

                $('#ver-mais').attr('data-ref', parseInt(proxima_pagina) + 1);
            }
       }); 
    });
});

O primeiro bloco carrega um conteúdo assim que a página é carregada totalmente, assim não fica sem nenhum conteúdo e só o botão aparecendo.

O segundo, quando você clica ele carrega abaixo do último os novos conteúdos.

A pagina.php é onde você fará a paginação (código que você informou no post).

3
  • Quando eu clico em carregar mais não acontece nada
    – ODDY
    Commented 25/05/2017 às 17:45
  • @ODDY você tem que configurar a URL completa no parâmetro url do ajax e nela você faz os procedimentos para fazer a paginação e o resultado você da um echo no script ao invés de return... Caso não funcione, dê um console.log(response) acima de $('#content').append(response); para ver a saida Commented 26/05/2017 às 0:42
  • Consegui. obrigado por me ajudar ^-^
    – ODDY
    Commented 27/05/2017 às 21:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .