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加载内容但不更新网址，因此当我刷新页面时，div中的内容会消失。我想要它，当我刷新页面时，它不会消失，也会更新网址。

例如： 默认url：index.php，当我按下一个标签时，它会从cart.php加载内容并将url更新为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');
   });
});