How can I make a button load more using jquery?

@ TássioGonçalves, you can do with the following steps:

index.html

<ul class="itens">
   <li class="item">A</li>
   <li class="item">B</li>
   <li class="item">C</li>
</ul>
<button class="mais">Carregar mais</button>

STEP 1 AND 2

jquery-script.js

// Atribui um event handler ao botao  - evento click
$(".mais").on('click', function () {
        var nItens = $itens.find(".item").length; // Conta o numero de itens
        var dadosEnviar = { offset : nItens };    // Dados que serao enviados ao BD. Será o número de ítens na página.
       pedidoAjax(dadosEnviar); 
});

AJAX request that waits for the server response in JSON format. In this case, a vector of strings in the JSON format.

var pedidoAjax = function(dadosEnviar) {
    $.ajax({
        data: dadosEnviar,        // dados a serem enviados
        dataType: "json",         // Formato do dado **recebido como resposta do servidor**.  html, json, text ...
        method: "post",           // post ou get
        url: "myPHPscript.php",   // url invocada
        success: function (dados, textStatus, jqXHR) {

            // Executado em caso de sucesso.
            console.log(dados + " " + textStatus + " " + jqXHR + " ");

            inserirItens(dados);
        },
        error: function (jqXHR, textStatus, errorThrown) {

            // Executado em caso de erro.
            alert(jqXHR + " " + textStatus + " " + errorThrown);
            error();
        }
    });
}

You can view more in this post .

STEP 3

/**
 * Funcao que insere os dados na lista
 * @param {string[]} dados. Vetor de strings. FORMATO: ["nome 1", "nome 2", "nome 3"]
 */
var inserirItens = function(dados) {
    function addItem(indice, dado) {
        // Cria item da lista
        var $li = $("<li></li>");

        // Configura-o
        $li.addClass("item");
        //...
        $li.html(dado);

        // Insere o elemento no DOM
        $li.appendTo($itens);
    }

    $.each(dados, addItem); // Para cada elemento no vetor 'dados', invoca a funcao 'addItem'
}

PHP code can be something like this

myPHPscript.PHP

//Altera o cabeçalho para que o PHP saiba que o retorno será uma string JSON
header('Content-Type: application/json; charset=utf-8');

// Recebe os dados (Número de ítens existentes na página do cliente)
$contentType = $_SERVER["CONTENT_TYPE"];
$response_array['contentType'] = $contentType;

$aDados = json_decode(file_get_contents("php://input"), true); // Recebe dados como array associativo. 

// Busca no BD
// Se o BD for MySQL ou PostgreSQL, use LIMIT e OFFSET para fazer a busca, ex:
// "SELECT nome FROM tabel LIMIT 3 OFFSET ".$aDados["nItens"].";";


// Cria array com os dados do BD
$dados = array();
while ($r...)               // $r guarda o resultado do BD
{
   $dados[] = $r["nome"];
}
// agora $dados é um array que contém todos os nomes buscados no BD.

// Converte o array para JSON e "retorna"
echo json_encode($response_array);

STEP 4

/**
 * Funcao que insere os dados na lista
 * @param {string[]} dados. Vetor de strings. FORMATO: ["nome 1", "nome 2", "nome 3"]
 */
var inserirItens = function(dados) {
    function addItem(indice, dado) {
        // Cria item da lista
        var $li = $("<li></li>");

        // Configura-o
        $li.addClass("item");
        //...
        $li.html(dado);

        // Insere o elemento no DOM
        $li.appendTo($itens);
    }

    $.each(dados, addItem); // Para cada elemento no vetor 'dados', invoca a funcao 'addItem'
}

Gabriel what you want to implement is something infinitscroll, you have many examples, I made one for you.

link