Simple php ajax pagination, how to get request url - php

Question

UPDATE 2 18.05.2020
(AJAX) URL pagination on refresh + window.history.replaceState + window.history.pushState +location.pathname
After refresh Test3
$(document).ready(function(){
load_data(1);
function load_data(page)
{
$('#load_data').html('<div id="status" style="" ></div>');
$.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 => {
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}`));
});
I've built a PHP AJAX pagination that works -> ajax pagination.
I'm new to jQuery/ajax. I am not able to understand the usage the url parameter.
My output: pagination2.php
I want the output: pagination2.php/page=2,3,4....
Any ideas?
My code index.php
$(document).ready(function(){
load_data(1);
function load_data(page)
{
$('#load_data').html('<div id="status" style="" ></div>');
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();
});
});
pagination2.php
echo "<span class='pagination_link' style='cursor:pointer;' id='".$i."'>".$i."</span>";
UPDATE1
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. Test 2
$(document).ready(function(){
load_data(1);
function load_data(page)
{
$('#load_data').html('<div id="status" style="" ></div>');
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 => {
var page = $(this).attr("id");
load_data(e.state.page);
console.log('popstate error!');
});
history.replaceState({page: null}, 'Default state', './');
});