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

Question

[Дмитрий]

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

Схема сайта такая, что инклудом загружаю все готовые элементы в 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 мне интересен не готовый код, а лишь алгоритм, чтобы понять самому схему работы :)

Answer 1

[Alams Stoyne]

Структура:

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">

Comments

[Дмитрий]

Если просто открыть about.php в домене сайта, т.е mysite.ru/content/about.php - то выводит ошибку 404.
Но если я его сделаю include, в div.content, то главная страница сайта работает с этим рабочим about.php.
Т.е проблема судя по всему в структуре?

[Alams Stoyne]

Проблема скорее всего в .htaccess

[Alams Stoyne]

Дмитрий, Покажите свою структуру )))

[Дмитрий]

Alams Stoyne, Я кстати его зачем-то сделал) Он у меня лежит в корне сайта
RewriteRule (.*) index.php?$1 [QSA,L]

[Дмитрий]

Дмитрий, вроде как это перенаправление всех несуществующих адресов на индекс, но это не пашет

[Дмитрий]

Alams Stoyne,
/content - файлы контента
/template - шапки и футеры
/img - понятно
/scripts/history.js jquery3.4.1.js loader.js(пустой)
.htaccess
index.php
reset и style.css

[Alams Stoyne]

Дмитрий, очень странно обычно .htaccess у подобных учебных проектов выглядит как-то так:

RewriteEngine On
RewriteCond $1 !^(index.php|js|css|font|images)
RewriteRule ^(.*)$ index.php/$1 [L]

и есть дополнительный роутинг и разбор URL

Раз не знаешь зачем тебе это - удали ))) а в будущем разберешься

[Дмитрий]

Alams Stoyne, Сделал как у вас .htaccess, теперь если в адрес вбить любой пыховский файл или директорию, он все равно открывает index.php. Т.е я так понял делает переадресацию на индекс.

[Alams Stoyne]

Дмитрий, Примерно такой .htaccess используется в MVC PHP FrameWork CodeIgniter и ДА все запросы идут на index.php - это входной файл любого запроса и с помощью функции роутинга вызывается нужный контроллер.

В вашем случае я писал:

Раз не знаешь зачем тебе это - удали ))) а в будущем разберешься сможешь использовать

Answer 2

[Пашенька]

Раз вы хотите менять 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, где обрабатываете нажатия туда-сюда в браузере
Примерно так, может быть немало нюансов.