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 и выражайте свои мысли.