更改url并更新页面内容而无需重新加载

Question

这是关于我的网站开发的毕业项目。我想在不重新加载页面的情况下更改页面内容- 我知道可以使用CSS / AJAX或jQuery实现这一点，但这只能通过jQuery中的hide和show或replaceWith()来实现。 我还想更改URL。我想实现类似于此页面https://www.khanacademy.org/computing/computer-programming - 当用户点击“INTRO TO JS：Drawing and animation”时，您将看到页面的URL和内容发生变化，但页面不会重新加载。

希望能得到指导。谢谢。

**MY header.php**

<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(function(){
 $("a[rel='tab']").click(function(e){
  //e.preventDefault(); 
  /* 
  if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
  if commented, html5 nonsupported browers will reload the page to the specified link. 
  */
  
  //get the link location that was clicked
  pageurl = $(this).attr('href');
  
  //to get the ajax content and display in div with id 'content'
  $.ajax({url:pageurl+'?rel=tab',success: function(data){
   $('#content').html(data);
  }});
  
  //to change the browser URL to 'pageurl'
  if(pageurl!=window.location){
   window.history.pushState({path:pageurl},'',pageurl); 
  }
  return false;  
 });
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
 $.ajax({url:location.pathname+'?rel=tab',success: function(data){
  $('#content').html(data);
 }});
});
</script>
<div id='menu'>
 <a rel='tab' href='http://localhost/html5-history-api/menu1.php'>menu1</a> | 
 <a rel='tab' href='http://localhost/html5-history-api/menu2.php'>menu2</a> | 
 <a rel='tab' href='http://localhost/html5-history-api/menu3.php'>menu3</a></div>

我的menu1.php文件（menu2和menu3的代码相同）。

<?php 
if($_GET['rel']!='tab'){
 include 'header.php';
 echo "<div id='content'>";
}
?>
menu1 content in menu1.php
<?php 
if($_GET['rel']!='tab'){
 echo "</div>";
 include 'footer.php';
}?>

我想要的是，当我点击链接时，链接会消失，只显示内容，例如“在menu1.php中的菜单1内容”，页面上没有其他内容。

- Neha

---

你想要改变URL而不重新加载整个页面吗？ - John Rey M. Baylen

请查看此链接：https://dev59.com/q3RA5IYBdhLWcg3wyRJ7 - Salah

请查看Angular JS，特别是称为“单页应用程序（SPA）”的概念。现在Gmail、Facebook等都在使用相同的架构。 - AdityaParab

@JohnReyM.Baylen：是的，可以将状态推送到 URL 上，而无需重新加载页面。 - AdityaParab

@JohnReyM.Baylen 是的，约翰，它可以在不重新加载页面的情况下更改URL并更改页面内容。 - Neha

@AdityaParab 我尝试了HTML5历史记录API，但它不像我想要的那样。请查看我刚刚更新的代码。 - Neha

Answer 1

我相信这个我从链接网站复制粘贴的脚本解释了他们如何替换URL。为了跟踪位置，他们使用localStorage来跟踪页面位置和其他信息。前往页面并导航到您所引用的链接。然后打开控制台并键入localStorage。当您按下“香蕉”时，您将看到我所说的。

您可以通过以下方式完成此操作

localStorage.setItem( "itemName", item )
localStorage.getItem( "itemName" )

以下是源代码。

<script type="text/javascript">
(function() {
        // If we arrived via a Facebook callback, it might have appended #_=_
        // to our URL. This can confuse our Backbone routers, so get rid of it.
        // https://dev59.com/7mw05IYBdhLWcg3wnjHC
        if (window.location.hash === "#_=_"){
            if (history.replaceState) {
                history.replaceState(null, null,
                        window.location.href.split("#")[0]);
            } else {
                window.location.hash = "";
            }
        }
    })();
</script>

- ALFmachine

---

真的，那只是他们页面上的一个例子。重要的信息在于如何完成这个版本。这些方法允许存储信息并从用户计算机的localStorage中调用信息。然后您可以使用该信息来记住一些东西。通过ajax调用将page.html注入视图，并使用类似FB的代码动态编辑window.location。还要动态注入DOC。这是一组函数而不是一个函数。我将发布一个包含js / jquery方法集的github repo来完成此操作，但我非常忙。当它准备好时，我会向您发送消息。重点是您需要的都在那里。 - ALFmachine

Answer 2

如果您使用的是Chrome浏览器，只需在div上右键单击并使用“检查元素”选项。这些是Web开发人员常用的工具。您提到的链接只是一个超链接，由于它是同一域下非常简单的静态页面，使用相同的资源（CSS，JS），因此加载非常快，并且您会得到没有页面加载的印象。

- Valath

---

是的，这就是让我困惑的地方 - 我尝试了检查元素，但我没有看到任何ajax或jquery，它们只是简单的div。 - Neha