On-demand loading

Question

Guys I’m trying to make a charging system on demand and I don’t know anything about ajax and I don’t understand very well how it would work.

I have a posting system that shows an amount of 10 posts on my page, and when I click on my second page (paging) it shows over 10 and so on until I finish my bank post.

What I wanted is to make a system on demand "Press Button More" without having to go to another page.

My file showing my posts

<?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>';}
    ?>

If anyone can help me vlw ^^

Answer 1

Use the jQuery and do something like:

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);
            }
       }); 
    });
});

The first block loads content as soon as the page is fully loaded, so there is no content and only the button appears.

The second, when you click it loads under the last the new contents.

To php page. is where you will make the pagination (code you reported in the post).