Ajax подгрузка контента по клику в div jQuery
Автор Макс ПуляВ этой статье рассмотрен легкий способ динамической подгрузки контента на страницу без перезагрузки в DIV блок с помощью jQuery Ajax по клику.
Начнем, пожалуй, с демо. Это простой пример, не судите строго. Он предназначен, чтобы показать суть.
Для работы Ajax необходима библиотека jQuery, если она у вас не подключена:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Важно! Технология Ajax не будет работать в браузере, если вы просто откроете свой файл html! Загружайте сразу файлы на виртуальный хостинг и эксперементируйте.
Итак. Нам нужен любой элемент, которому нужно присвоить уникальный id или class. В моем примере я буду использовать id. Это будет элемент, по которому нужно кликнуть, чтобы подгрузить контент. Пусть это будет span.
<span id="price">Прайс-лист</span>
Теперь нам нужен блок. Это может быть не обязательно DIV. Но в моем случае это так. Присвоим блоку DIV id - content.
<div id="content"></div>
Сейчас в блоке DIV ничего нет. Можете добавить туда что-либо, можете не добавлять.
Создайте новый файл html, например, price.html и сохраните в нем то, что хотите подгружать. Например:
<h2 align="center">Прайс-лист</h2>
<p>Какой-то текст или что угодно…</p>
Теперь самое интересное - код JavaScript
$('#price').on('click', function(){ //При клике по элементу с id=price выполнять…
$.ajax({
url: 'price.html', //Путь к файлу, который нужно подгрузить
type: 'GET',
beforeSend: function(){
$('#content').empty(); //Перед выполнением очищает содержимое блока с id=content
},
success: function(responce){
$('#content').append(responce); //Подгрузка внутрь блока с id=content
},
error: function(){
alert('Error!');
}
});
});
В коде подписаны важные строки. Думаю, проблем возникнуть не должно. Единственное что можно добавить к описанию этого кода, в строке $('#content').append(responce); - append означает, что содержимое файла подгрузится внутрь блока с id=content. Но есть и другие значения: before - подгрузит до блока с id=content, а after - подгрузит после блока с id=content. Тут каждый выбирает, то что ему нужно. Символ # перед content означает id, для класса стиля используется точка, вот так: $('.mystyle').append(responce); Конечно, этот код можно усложнить задержками, спинерами, изменениями стилей и многим другим.
Скачать мой готовый вариант можно по этой ссылке.
Всем удачи и добра!

Макс Пуля
Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.
Последнее от Макс Пуля
- $100 длиной в 2,5 года: доход сайта AdSense за два с половиной года
- Поворот текста, текст по диагонали CSS
- Как сделать верхний слой неактивным (некликабельным) CSS pointer-events
- VideoRoll.net - отзыв и обзор партнёрской программы по видеорекламе
- Высота iframe в зависимости от содержимого
- Скрыть / Показать DIV блок при выборе select пункта
- Как прибавить или вычесть процент от числа на PHP/JavaScript
- Как отключить просмотр исходного кода, проверку элемента и правую кнопку на сайте
- Новые планы: разработка мобильной игры
- Сервер, проекты и ffmpeg