title: Simple php ajax pagination, how to get request url
body: <p><strong>UPDATE 2 18.05.2020</strong></p>
  
  <p>(AJAX) URL pagination on refresh + window.history.replaceState + window.history.pushState +location.pathname</p>
  
  <p>After refresh <a href="http://mantykora.cleoni.com:8080/2020_pagination_1/public/page=5" rel="nofollow noreferrer">Test3</a></p>
  
  <p><a href="https://i.stack.imgur.com/nIf0Z.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nIf0Z.jpg" alt="enter image description here"></a></p>
  
  <pre><code> $(document).ready(function(){  
        load_data(1);      
        function load_data(page)  
        {          
          $('#load_data').html('&lt;div id="status" style="" &gt;&lt;/div&gt;');
          $.ajax({
                  url:"pagination2.php",  
                  method:"POST", 
                  data:{page:page},  
                  success:function(data){  
                       $('#load_data').html(data);
                  } 
             }); 
        }  
  
        $(document).on('click', '.pagination_link', function(event) 
          {
              event.preventDefault(); 
              var page = $(this).attr("id"); 
              load_data(page);
              //Now push PAGE to URL
              window.history.pushState({page}, `Selected: ${page}`, `${ 'page=' + page}`)
              //window.history.pushState({page}, `Selected: ${page}`, `./selected=${page}`)
              return event.preventDefault(); 
        });
              window.addEventListener('popstate', e =&gt; {
              var page = $(this).attr("id");
              load_data(e.state.page);
              console.log('popstate error!');
      });
  
          //history.replaceState({page: null}, 'Default state', './');
          var params = new URLSearchParams(location.search);
          params.set('page');
          window.history.replaceState({}, "", decodeURIComponent(`${location.pathname}?${params}`));
   }); 
  </code></pre>
  
  <p>I've built a PHP AJAX pagination that works -> <a href="http://mantykora.cleoni.com:8080/2020_pagination_2/public/" rel="nofollow noreferrer">ajax pagination</a>.</p>
  
  <p>I'm new to jQuery/ajax. I am not able to understand the usage the url parameter.</p>
  
  <p>My output: <code>pagination2.php</code></p>
  
  <p>I want the output: <code>pagination2.php/page=2,3,4....</code></p>
  
  <p>Any ideas?</p>
  
  <p>My code <strong>index.php</strong></p>
  
  <pre><code>$(document).ready(function(){ 
        load_data(1);   
        function load_data(page)  
        {          
          $('#load_data').html('&lt;div id="status" style="" &gt;&lt;/div&gt;');
          var action = 'pagination2';
          $.ajax({
                  url:"pagination2.php",  
                  method:"POST", 
                  data:{page:page}, 
                  complete: function(){
                      alert(this.url)
                  },
                  success: function(data){  
                       $('#load_data').html(data);
                  }, 
             })  
        }  
  
        $(document).on('click', '.pagination_link', function(event) 
          {
              event.preventDefault();  
              var page = $(this).attr("id"); 
              load_data(page);
              return event.preventDefault();
        });
   }); 
  </code></pre>
  
  <p><strong>pagination2.php</strong></p>
  
  <pre><code>echo "&lt;span class='pagination_link' style='cursor:pointer;' id='".$i."'&gt;".$i."&lt;/span&gt;"; 
  </code></pre>
  
  <p><strong>UPDATE1</strong> 
  I added: history.pushState but I don't know if this method is correct. I can manipulate next - back /selected=2, selected=3... But, another problem arises, after refresh selected disappears. <a href="http://mantykora.cleoni.com:8080/2020_pagination_1/public/" rel="nofollow noreferrer">Test 2</a></p>
  
  <pre><code>$(document).ready(function(){ 
  
        load_data(1);  
        function load_data(page)   
        {   
          $('#load_data').html('&lt;div id="status" style="" &gt;&lt;/div&gt;');
          var action = 'pagination2';
          $.ajax({
  
                  url:"pagination2.php",  
                  method:"POST",
                  error: function(xhr, text){
                  alert("Whoops! The request for new content failed");
                       }, 
                  data:{page:page},  
                  success:function(data){  
                       $('#load_data').html(data);
                  }, 
             })  
        }  
  
  
        $(document).on('click', '.pagination_link', function(event) pagination
          {
              event.preventDefault(); 
              var page = $(this).attr("id"); 
              load_data(page);
              history.pushState({page}, `Selected: ${page}`, `./selected=${page}`)
              return event.preventDefault();
        });
  
              window.addEventListener('popstate', e =&gt; {
              var page = $(this).attr("id");
              load_data(e.state.page);
              console.log('popstate error!');
      });
          history.replaceState({page: null}, 'Default state', './');
   }); 
  </code></pre>