@snickers0101
Frontend

Как грамотно сделать динамическую загрузку содержимого в div-блок?

Добрый день. Практикуюсь сейчас по верстке сайта-визитки, и для упрощения себе жизни решил делать его динамическим.

Схема сайта такая, что инклудом загружаю все готовые элементы в index.php, а в нем есть следующая структура body:
<?php include ('template/header.php'); ?>
<div class="content"> Сюда идет загрузка динамического контента </div>
<?php include ('template/footer.php'); ?>


Никаких сложных систем на сайте нет, лишь обычное отображение информации без наличия статей и профилей пользователей, поэтому MySQL (имхо) не нужна.

Почитав несколько статей, я понял, что современной является только сборка AJAX + History API, но по урокам собрать у меня не получилось, при клике в кнопке меню меня перенаправляло на ошибку 404, потому что каждый файл с контентом содержал лишь div-блоки без HTML-разметки.

Сама ссылка меню (предок - div-блок с ".menu"):
<li><a href="/content/about.php">О нас</a></li>

Работаю с помощью XAMPP, но все JS и php скрипты он читает, а в готовых скриптах я, само собой, заменял все левые айдишники и классы на свои. Не могли бы вы помочь мне с организацией самой структуры так называемого загрузчика? Нужен ajax.php, который будет принимать и отдавать запросы и скрипт с history?
P.S мне интересен не готовый код, а лишь алгоритм, чтобы понять самому схему работы :)
  • Вопрос задан
  • 647 просмотров
Пригласить эксперта
Ответы на вопрос 2
alams_stoyne
@alams_stoyne
Full Stack Developer - #PHP #CSS #JS #DB
Структура:
index.php
content/
	info.php
	about.php
template/
	header.php
	footer.php


Вариант index.php
<?php include ('template/header.php'); ?>
	<div class="content"> Сюда идет загрузка динамического контента </div>
	<?php include ('template/footer.php'); ?>


about.php
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus a cum recusandae quaerat eaque, iure accusantium? Voluptate cupiditate excepturi obcaecati ipsam reiciendis repudiandae aliquam laborum, quas iure architecto ducimus natus.</p>


Проверяем выводит ли данные по ссылке mysite.ru/content/about.php - если нет проверяем почему.
Если да то делаем на JS при клике запрет на переход и AJAX GET запрос по этой ссылке и полученный ответ вставляем в
<div class="content">
Ответ написан
like-a-boss
@like-a-boss
Признайся,тебяТянетНаКодМужика,ты—программный гей
Раз вы хотите менять URL посредствам History API, то для начала нужно сделать так, чтобы у вас не было 404-ых. Каждая ссылка должна возвращать страницу по прямому запросу к ней, т.е. если в браузере мы вводим https://myawesomesite.com/about.php, то должны получать такую же страницу, как мы будем получать при внутренней навигации по сайту, нажав на About и использовав динамическую подгрузку.
В противном случае вам не нужен History API и можно тупо подгружать контент в контейнер и не менять урлов.

А алгоритм там простой:
1) убиваете поведение по умолчанию на ссылках
2) шлёте ajax запрос за страницей
3) на успешный ответ вызываете history.pushState({тут как придумаете}, '', новый урл)
4) возможно парсите полученный текст страницы и делаете там всякие манипуляции
5) втыркаете html строку/DOM в контейнер .content
6) меняете title, meta-тэги страницы, взяв их с распаршенной страницы
7) первично вешаете обработчик onpopstate, где обрабатываете нажатия туда-сюда в браузере
Примерно так, может быть немало нюансов.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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