Как сделать кнопку "показать еще" для подгрузки контента с помощью jquery?

1

<button id="load-more">Показать еще</button>

1

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

$(document).ready(function() {
    var limit = 10; // количество элементов, которое загружается за один раз
    var start = 0; // с какой позиции начинать загрузку
    $('#load-more').click(function() {
        start += limit;
        $.ajax({
            url: 'load-more.php', // адрес скрипта, который будет загружать контент
            method: 'POST',
            data: {'start': start, 'limit': limit},
            success: function(response) {
                $('#content').append(response); // добавляем загруженный контент к уже существующему
            }
        });
    });
});

1
2
3
4
5
6

<?php
$start = $_POST['start'];
$limit = $_POST['limit'];
$items = array(); // здесь нужно написать код, который вернет массив элементов для загрузки
echo implode('', $items);
?>

1
2
3
4
5
6
7
8
9

#load-more {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    border: none;
    cursor: pointer;
}