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');
   });
});