Ajax加載動態頁面

Question

HTML index.php

<a class="cart-icon" href="cart"></a>
<div class="content"></div>

Ajax從load-content / cart.php加載內容

$(document).ready(function(){
   $(document).on('click', '.cart-icon', function(e){
       e.preventDefault();
       var page = $(this).attr("href");
       $('.content').load('load-content/'+page+'.php');
   });
});

此代碼將從cart.php加載內容，但不會更新URL，因此當我刷新頁面時，該div中的內容就會消失。 我想要它，當我刷新頁面時它不會消失並且也更新URL。

例如：默認網址：index.php，當我按下標簽時，它將從cart.php加載內容，並將網址更新為index.php / load-content / cart.php

Answer 1

你需要某種形式的持久性存儲。 您加載到頁面DOM中的任何內容都是臨時的。 您可能只是在文檔加載時執行與此處相同的操作：

$(document).ready(function(){
   $('.content').load('load-content/'+page+'.php');
   $(document).on('click', '.cart-icon', function(e){
       e.preventDefault();
       var page = $(this).attr("href");
       $('.content').load('load-content/'+page+'.php');
   });
});