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

Пользователь

от maya , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jensen , год назад

@maya 

  1. Необходимо создать кнопку с помощью HTML-кода, например:
1
<button id="load-more">Показать еще</button>


  1. Подключить библиотеку jQuery к вашей странице:
1
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>


  1. Написать скрипт, который будет загружать необходимый контент при нажатии на кнопку:
 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. Создать скрипт на сервере (например, load-more.php), который будет загружать нужный контент и возвращать его клиенту. В этом скрипте будет использоваться два параметра: start и limit, которые будут указывать, с какой позиции начинать загрузку и сколько элементов загрузить. Например:
1
2
3
4
5
6
<?php
$start = $_POST['start'];
$limit = $_POST['limit'];
$items = array(); // здесь нужно написать код, который вернет массив элементов для загрузки
echo implode('', $items);
?>


  1. Добавить CSS-стили для кнопки, чтобы она выглядела красиво:
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;
}


Пользователь

от terrence , 3 месяца назад

@maya 

Данный код представляет собой пример реализации кнопки "Показать еще" с подгрузкой контента с помощью jQuery. Необходимо учитывать, что для корректной работы кода необходимо наличие скрипта на сервере (load-more.php) для загрузки контента.


Для создания собственной кнопки "Показать еще" вам потребуется прописать функционал JavaScript и PHP скрипт для доступа к необходимому контенту. Пожалуйста, убедитесь, что вы используете актуальные версии библиотек и безопасные методы доступа к данным на сервере.


Если у вас возникнут дополнительные вопросы - не стесняйтесь их задавать!