AJAX подгрузка контента (две проблемы)
Очень нужна помощь (ChatGTP не понимает мою печаль :D). Делаю аякс переходы, мне нужно, чтобы не изменялся хеадер и футер. Структура. header.php - css, js. footer.php окончание стандартного html.
Код index.php:
<?php include'include/header.php'?>
<div id="content">
text text text
</div>
<?php include'include/footer.php'?>
AJAX.js:
function loadPageContent(url) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// Обновление содержимого страницы
document.getElementById('content').innerHTML = this.responseText;
// Найти ссылки в обновленном контенте и добавить класс ajax-link
var updatedLinks = document.querySelectorAll('#content a');
for (var i = 0; i < updatedLinks.length; i++) {
updatedLinks[i].classList.add('ajax');
}
}
};
xhttp.open('GET', url, true);
xhttp.send();
}
// Обработчик события клика по ссылке
document.addEventListener('click', function(event) {
// Проверить, было ли кликнуто по ссылке с классом ajax-link
if (event.target.tagName === 'A' && event.target.classList.contains('ajax')) {
// Запретить переход по умолчанию
event.preventDefault();
// Получить URL ссылки
var url = event.target.getAttribute('href');
// Загрузить содержимое страницы с помощью Ajax
loadPageContent(url);
// Изменить URL в адресной строке
window.history.pushState(null, '', url);
}
});
HTML пример перехода
<a class="ajax" href="/ololo.php">ссылка</a>
Переход работает, текст выводит и заменяет первоначальний текст. Но как вы уже поняли, есть проблеми и я не знаю, какая хуже :(
- Если понтециальный пользователь начнет своё посещение сайта с условной страницы ololo, то его там ждет просто текст, поскольку indude header/footer есть только в index.php. Казалось бы, подключи в ololo.php includы и всё. Нельзя, потому, что при ajax переходе будет дублироваться html тєло со всем барахлом. Второе решение, это просто убрать window.history.pushState(null, '', url); и дело з концом, но что это тогда за сайт, когда нельзя дать ссылку на конкретную страницу? В общем, не знаю как быть.
- Если перейти на всю ту же ololo.php, а потом обратно на index.php , то происходит перезагрузка страницы, вместо того, чтобы вернут первоначальный text text text. Буду очень благодарен за помощь, подказки, или даже решение, как с логикой построения, так и кодом.
Источник: Stack Overflow на русском