@TássioGonçalves, você pode fazer com os seguintes passos:
- Atribui o event handler
click
ao botão "Carregar mais".
- Conta o número de itens existentes na página.
- Faz pedido de dados a uma página PHP que vai buscar no BD
- Recebe esses dados e insere-os na página.
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>
PASSO 1 E 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);
});
Pedido AJAX que espera a resposta do servidor no formato JSON. Nesse caso, um vetor de strings no formato JSON.
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();
}
});
}
Você pode ver mais nesse post.
PASSO 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`
}
O código PHP pode ser algo assim
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);
PASSO 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`
}