0

К сожалению, не смог решить задачу самостоятельно. Прошу помочь разобраться. Тренируюсь на локальном сервере.

Задача

Нужно преобразовать адрес вида:

http://localhost/site/users/profile

в адрес вида:

http://localhost/site/users/tol64

, но без перезагрузки страницы.

//---

Сейчас реализовано так, что при наведении курсора на ссылку показывается адрес

http://localhost/site/users/tol64

, но переход осуществляется по

http://localhost/site/users/profile.php

То есть в html вместо profile в ссылку подставляется никнейм авторизованного пользователя:

<a class="profile" href="/site/users/<?php echo @$_SESSION['logged_user']; ?>">

, а при обработке клика по ссылке в javascript подменяем ссылку для перехода к нужному php-скрипту:

const user_link = document.querySelector('.profile');
if (user_link != undefined) {
    user_link.onclick = function() {
        this.href = 'http://localhost/site/users/profile';
    };
}

В файле .htaccess есть преобразование убирающее расширение .php

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php

Перепробовал множество различных вариантов. Ничего не помогает. Либо всё остаётся, как есть. Либо ошибка 404.

Одна из попыток приводящая к ошибке 404:

RewriteRule ^users/(.*)$ /profile?user=$1

А вот этот вариант ошибок не выдаёт, но ничего не изменяет в адресной строке:

RewriteRule ^/users/(.*)$ /profile?user=$1

Файл .htaccess находится в корневой директории:

http://localhost/site

Как можно решить эту задачу? Может быть есть другие способы без редактирования .htaccess?

P.S. >

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

В файле .htaccess теперь не производится попытки преобразования ссылки.

JS-код обработки клика на ссылке профиля пользователя теперь выглядит вот так:

const user_link = document.querySelector('.profile');
if (user_link != undefined) {
    user_link.onclick = function() {
        //--- Получаем никнейм из содержания элемента
        let user_name = this.innerText;
        //--- Блокируем переход по ссылке
        this.href = '#';
        //--- Добавляем в историю путь, который нужно отобразить в адресной строке
        window.history.pushState(null, null, "/site/users/" + user_name);
        //--- Подготовка запроса для сервера
        var xhr = AjaxRequest();
        //--- Путь к файлу с содержимым профиля
        let path = '/site/users/profile';
        //--- Асинхронный (true) GET-запрос для *.php
        xhr.open("GET", path, true);
        //--- Ожидаемый тип ответа
        xhr.responseType = 'text';
        //--- Запрос данных
        xhr.send();
        //--- Обработка ответа от сервера
        xhr.onload = function () {
            //--- Вернуться в истории на шаг назад
            window.history.back();
            //--- Переписать страницу присланным html-кодом от сервера
            document.write(xhr.response);
        }
    };
}

После нажатия на ссылке профиля пользователя сначала блокируется переход по ней:

this.href = '#';

и, если при обработке ответа от сервера не произвести шаг назад:

window.history.back();

, то в адресной строке увидим следующий результат:

http://localhost/site/users/tol64#

Шаг назад убирает символ #, но иногда видно, как он мигает.

На первый взгляд проблема решена, но если сейчас, находясь в профиле пользователя, обновить страницу, получаем ошибку 404.

Есть ли, какие-то общие правила, которые бы помогли реализовать описанную схему без таких проблем? Может быть, кто-нибудь порекомендует книгу, где описывается подобное, чтобы не изобретать велосипед? На многих сайтах такое реализовано.

3
  • 1
    Возможный дубликат вопроса: Как изменить адресную строку браузера без перезагрузки?
    – Dmytro
    8 сен 2019 в 9:39
  • 1
    чтобы не изобретать велосипед, можно воспользоваться одним из фреймворков. Они для того и создавались, чтобы реализовать типовые решения и позволить программисту сконцентрироваться на конкретной прикладной задаче. Обычно это осознают только после N-й попытки написать собственный фреймворк (я, кстати, - не исключение). Обратите внимание, например, на Laravel, IMHO он легче для начала. И там это есть. laravel.com/docs/5.8/routing#required-parameters 8 сен 2019 в 14:41
  • А если создать страницу с адресом localhost/site/users/tol64, и в ней <iframe width=100% height=100% src="localhost/site/users/profile"></iframe>?
    – Опан
    8 сен 2019 в 20:35

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.