Question

我尝试使用ajax从其他页面加载内容并将浏览器URL更改为新内容，这里是代码

index.php页面：

$('.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

通过在调用ajax之前使用带有空url的history.pushstat来完成并在成功时调用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);
         }
      }
   });
}

我不知道这是否是最佳解决方案，但它对我有用，我想分享它。

ajax和history.replaceState问题

1 个答案: