How to make the transition through the pages without generating URLs (like mobile app)?

Good day, please help me how we can implement the transitions into sections (pages) without reloading the site with the back button without creating a new url, as in mobile applications. An example picture attached, tell me, please.
5e283d6acef25285543062.jpeg
April 4th 20 at 13:20
3 answers
April 4th 20 at 13:22
@justine_Rippin67, you Have confusion in my head.

The principle is this:
  1. write PHP page (for example get_info.php) which receives the information from the database under the specified ID ( e.g. get_info.php?id=1) and returns in the right format (e.g. json)
  2. Write a JS function to retrieve information by sending a request to the file (Fetch, or Ajax )
  3. Write a JS function rendering page
  4. Write a JS function to intercept the click event on the links and banned the transition, instead causing "feature for information" and "function render"


PHP Backend
HTML+CSS+JS frontend
I understood the logic, but how to implement everything in js, examples, or where no code to look? - justine_Rippin67 commented on April 4th 20 at 13:25
<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>


Using 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"))
});
});


About jquery.get read here - simeon_Brakus commented on April 4th 20 at 13:28
You can do pure JS but not sure that is your level. - simeon_Brakus commented on April 4th 20 at 13:31
Just need to add a variable to know where to go and decide either to re-do the query to retrieve data or to store the body of the HTML page you want displayed when clicking on the "back"button - simeon_Brakus commented on April 4th 20 at 13:34
April 4th 20 at 13:24
Via ajax?
I don't know how will advise the data in sections c will output the database through php. - justine_Rippin67 commented on April 4th 20 at 13:27
@justine_Rippin67, here is a similar question - Chandler_Botsfo commented on April 4th 20 at 13:30
Do the application to React or Vue, for navigation use React Router or the other.
If you write on pure JS or jQuery is a huge chance to shoot yourself in the foot, and wasting time on unnecessary. - Cynthia20 commented on April 4th 20 at 13:33
April 4th 20 at 13:26
Google SPA, and you will find the answer to your question

Find more questions by tags JavaScript