Как сделать переход по страницам без формирования url адресов (как мобильное приложение)?

Question

[Дмитрий]

Добрый день, помогите,пожалуйста, как можно реализовать переходы по разделам (страницам) без перезагрузки сайта, с кнопкой назад, не создавая новых url, как в мобильных приложениях. Пример фото прикрепил, подскажите, пожалуйста.

Answer 1

[Alams Stoyne]

Дмитрий, У тебя путаница в голове.

Принцип такой:

1. на PHP пишешь страницу (например get_info.php) которая получает информацию из БД согласно заданному ID ( например get_info.php?id=1) и возвращает в нужном тебе формате (например json)
   
2. На JS пишешь функцию для получения информации путем отправки запроса к данному файлу (Fetch или Ajax )
   
3. На JS пишешь функцию рендеринга страницы
   
4. На JS пишешь функцию перехвата события click по ссылкам и запрещаешь переход, вместо этого вызывая "функцию для получения информации" и "функцию рендеринга"
   

PHP - Бекенд
HTML+CSS+JS - фронтэнд

Comments

[Дмитрий]

Логику понял, но вот как реализовать всё на js, примеров ни где нету глянуть код?

[Alams Stoyne]

<div class="page">
		<a href="#" class="link" data-id-page="1"> Link 1</a>
		<a href="#" class="link" data-id-page="2"> Link 1</a>		
	</div>

Используя jQuery

$(document).ready(function(){
    function get_info(id){
        $.get( "test.php?id"+id, function( data ) {
            $( ".page" ).append( data.content );
        }, "json" );
    }

    $(document).on("touchend click", "a", function(e){
            e.preventDefault();
            get_info($('this').data("id-page"))
    });
});

Про jquery.get читать тут

[Alams Stoyne]

Можно обойтись чисто на JS но не уверен что это твой уровень.

[Alams Stoyne]

Так же нужно добавить переменную для того чтобы знать куда возвращаться и принять волевое решение либо вновь делать запрос и получать данные или же хранить тело HTML страницы которую нужно показать при нажатии на кнопку "назад"

Answer 2

[Евгений Залецкий]

Через ajax?

Comments

[Дмитрий]

Я не знаю как правильно будет посоветуйте, данные по разделам буду выводить c бд через php.

[Евгений Залецкий]

Дмитрий, вот подобный вопрос

[Александр]

Делай приложение на React или Vue, для навигации используй React Router или другое.
Если писать на чистом JS или jQuery огромный шанс выстрелить себе в ногу, да и большая трата времени на лишнее.

Answer 3

[prrrrrrr]

гуглите SPA, и найдёте ответ на свой вопрос