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

Задача: по нажатию переходить по ссылке без перезагрузки
Проблема: ничего не срабатывает, правильно все делаю?
$(function() {
    $('#detoxNav').on('click', function(event) {
        event.preventDefault();
        window.location = '/detox.html';
    });
});
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
@zkrvndm
Боты, парсеры, расширения
Ниже пример функции для загрузки страниц по 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();

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы