AJAX подгрузка контента (две проблемы)

Рейтинг: 0Ответов: 0Опубликовано: 23.05.2023

Очень нужна помощь (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>

Переход работает, текст выводит и заменяет первоначальний текст. Но как вы уже поняли, есть проблеми и я не знаю, какая хуже :(

  1. Если понтециальный пользователь начнет своё посещение сайта с условной страницы ololo, то его там ждет просто текст, поскольку indude header/footer есть только в index.php. Казалось бы, подключи в ololo.php includы и всё. Нельзя, потому, что при ajax переходе будет дублироваться html тєло со всем барахлом. Второе решение, это просто убрать window.history.pushState(null, '', url); и дело з концом, но что это тогда за сайт, когда нельзя дать ссылку на конкретную страницу? В общем, не знаю как быть.
  2. Если перейти на всю ту же ololo.php, а потом обратно на index.php , то происходит перезагрузка страницы, вместо того, чтобы вернут первоначальный text text text. Буду очень благодарен за помощь, подказки, или даже решение, как с логикой построения, так и кодом.

Ответы

Ответов пока нет.