AJAX-запрос на загрузку новой страницы?

Question

[Sanzhar Bazarbek]

Задача: по нажатию переходить по ссылке без перезагрузки
Проблема: ничего не срабатывает, правильно все делаю?

$(function() {
    $('#detoxNav').on('click', function(event) {
        event.preventDefault();
        window.location = '/detox.html';
    });
});

Answer 1

[Надим]

Ниже пример функции для загрузки страниц по AJAX, без перезагрузки страницы:

async function pageUpdate(event) {
	
	// Если функция вызвана без аргументов:
	
	if (typeof event == 'undefined') {
		
		// Устанавливаем обработчики
		// на все ссылки на странице:
		
		$('a[href]').click(pageUpdate);
		
	}
	
	// Если функция вызвана
	// в результате клика
	// по ссылке:
	
	else {
		
		// Берём адрес с нажатой ссылки
		// и записываем в переменную link:
		
		var link = event.target.href;
		
		// Если ссылка ведет на наш сайт:
		
		if (link.includes(location.host)) {
			
			// Предотвращаем переход:
			
			event.preventDefault();
			
			// Блокируем страницу, чтобы
			// больше нельзя было кликать:
			$('body').css('pointer-events', 'none');
			
			// Активируем анимацию
			// постепенного исчезновения
			
			await $('body').animate({ opacity: 0 }, 1000).promise();
			
			// Грузим новую страницу AJAX-ом без
			// фактической перезагрузки текущей:
			
			var html = await $.ajax(link);
			var doc = new DOMParser().parseFromString(html, 'text/html');
			var html = $('body', doc).html();
			history.pushState(null, null, link);
			$('body').html(html);
			
			// Заново ставим
			// обработчики:
			
			pageUpdate();
			
			// Активируем анимацию
			// постепенного появления:
			
			await $('body').animate({ opacity: 1 }, 1000).promise();
			
			// Снимаем блокировку с документа:
			
			$('body').css('pointer-events', '');
			
		}
		
	}
	
}

pageUpdate();

Функция перехватывает клики по ссылкам, добавляет анимацию и обновляет контент страницы без перезагрузки.

Comments

[Sanzhar Bazarbek]

Это ajax как я понимаю?

[Надим]

Sanzhar Bazarbek, он самый. Только убедитесь, что у вас на сайте подключен jQuery.

[Sanzhar Bazarbek]

Надим Закиров, все афигенно работает, НО если возвращаться на страницу назад - не много подлагивает и появляется та же страница - а не прошлая. Возможно исправить?

[Надим]

Sanzhar Bazarbek, исправить можно, но это надо ковырять в сторону работы с History API. Вешайте обработчик на событие возврата, отменяйте его и грузите страницу вручную. Сори, не могу привести пример, слишком лень писать код.

[Sanzhar Bazarbek]

Надим Закиров, Хорошо!

Написал такой код:

window.addEventListener('popstate', function(event) {
    alert("STOP");
    event.preventDefault();
}, false);

В итоге, он. не отменяет действие но дает alert. В правильном направлении движусь?

[Надим]

Sanzhar Bazarbek, не знаю, мне чтобы ответ вам дать, надо сначала самому попробовать, поэкспериментировать, да только устал я сегодня, желания нет ковыряться.

[Sanzhar Bazarbek]

Надим Закиров, эх ладно, все равно спасибо за помощь!

[Надим]

Sanzhar Bazarbek, кстати да, вы не туда копайте. Копипаста:

spoiler

суть решения: при каждом вызове AJAX к URL'у страницы в качестве якоря добавляется текущий номер элемента в стеке «истории», фактически, просто увеличивающиеся числа. При нажатии кнопки «назад» в браузере, URL страницы меняется на предыдущий. Каждые 100 (200, 400, 1000) миллисекунд страница проверяет, не изменился ли у нее якорь в URL'е, если якорь изменился, то осуществляется подгрузка данных, соответствующих текущему якорю (=элементу в стеке «истории»).