How to display content from another page dynamically

Question

I would like to be able to display various contents (from other pages) on a single page for each click on a link or button that the user gives. I know one of the solutions would be to use AJAX, but the problem is that when I do refresh, the content that is visible at the moment disappears and goes back to the main page, what I would like is to remain on the same page with the same content before the refresh.

The Javascript code I use is this:

$.ajax({
    url : './pagina.php',
    type : 'POST',
  cache: false,
    data : 'dado=' + dado,
    beforeSend: function () {},
    complete: function () {},       
    success: function(data){
       $('#showInfo').html(data); //      $('# showInfo').show();
    },
    error: function(){
       // comandos a serem executados caso Houver algum 
    });        

Another one I’ve also used is:

  $.get("pautas.php?acao=1", function( data ) {
    $('#content').html(data);
  });

Can someone please give me a hint???

Answer 1

Each click the user gives adds a hash to the url. So you will have a control of the pages that that user has already passed and will know how many pages need to load.

var page = 0;

$('button.next').click(function(event) {
    event.preventDefault();
    window.location.hash = page+=1;
});

When the page is loaded you check if it has hash, if you have it you will have to load the amount of information that that hash represents. If each Voce page loads 10 data and the user gave Reload in #3 you need to print with ajax 30 results.

To get the hash of the url just use

window.location.hash