ajax и history.replaceState проблема

Question

Я пытаюсь загрузить контент с другой страницы с помощью ajax и изменить URL браузера на новый контент, а вот код

index.php page:

$('.btn').click(function(){
  loadContent($(this).attr('data-page'),$(this).attr('data-query'));
});
		
function loadContent(d1,d2){
  if (d2 == ''){
    history.replaceState(null,'','/example/'+d1);
  }
  else{
    //    this is the issue cause
    history.replaceState(null,'','/example/'+d1+'/'+d2);
  }
  $.ajax({
    method: 'POST',
    url: 'get-contents.php',
    data: {data1: d1, data2: d2},
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    success: function(data){
      $('.content').html(data);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-page="page1" data-query="">load page without query</button>
<button class="btn" data-page="page1" data-query="query">load page with query</button>
<div class="content"></div>

Получить код страницы содержимого (get-contents.php):

include($_POST['data1'].'.php');

Включенный код страницы (page1.php):

if (isset($_POST['data2']) && $_POST['data2'] != ''){
    echo $_POST['data2'];
}
else{
    echo 'not set';
}

При нажатии кнопки (загрузить страницу без запроса), вывод будет:

//content
not set
// browser url
localhost/example/page1

При нажатии кнопки (загрузка страницы с запросом), вывод будет:

//content
// <<<<<<<nothing is happen and this is the problem>>>>
// browser url
localhost/example/page1/query

Если я прокомментировал строку:

//history.replaceState(null,'','/example/'+d1+'/'+d2);

Содержимое будет успешно загружено, что не так с этой строкой.

Хотелось бы, чтобы все было хорошо.

Спасибо за помощь.

Answer 1

Это делается с помощью history.pushstat с пустым URL перед вызовом ajax и при успешном вызове history.replaceState: {}

function loadContent(d1,d2){
   history.pushState({},'','');
   $.ajax({
      method: 'POST',
      url: 'get-contents.php',
      data: {data1: d1, data2: d2},
      contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
      success: function(data){
         $('.content').html(data);
         if (d2 == ''){
            history.replaceState({},'','/example/'+d1);
         }
         else{
            history.replaceState({},'','/example/'+d1+'/'+d2);
         }
      }
   });
}

Я не знаю, является ли это лучшим решением, но оно работает дляя, И я хотел бы поделиться этим.