php - 如何在不刷新导航栏的情况下加载内容答案

【问题标题】：php - how to load contents without refreshing navigation barphp - 如何在不刷新导航栏的情况下加载内容
【发布时间】：2012-07-10 06:20:56
【问题描述】：

我想弄清楚如何在不刷新导航栏的情况下加载内容，就像 facebook 那样。

如果您查看 Facebook 个人资料（不是时间线），左栏中有一个导航栏，其中包含“墙”、“信息”、“照片”、“朋友”等。

例如，当您单击“墙”时，url 变为www.facebook.com/yourid?sk=wall，中间列会刷新并加载内容。但这会在不刷新左侧导航栏（也是顶部菜单栏）的情况下发生。

这是如何工作的？

我正在开发一个 php 网站，其 url 类似于 www.example.com/profile.php?id=1234，这是带有导航栏的主页，当用户创建页面时，url 变为 www.example.com/profile.php?id=1234&page=1。如何在不刷新导航栏部分的情况下加载 &page=1 内容？

========================================

我从标题中去掉了（没有 javascript）。我以为 facebook 在没有 javascript 的情况下这样做，但我错了。

【问题讨论】：

你为什么确定 facebook 没有使用 js？
@Daedalus 我在浏览器上关闭了 javascript 进行了尝试，但导航栏仍然没有刷新。也许我错了..
导航栏没有在关闭js的情况下刷新？坦率地说，我不知道这意味着不使用 js。
@Daedalus 我错了。导航栏确实得到了刷新。我只是没有注意到它，因为它刷新得太快了。

标签： php menubar navigationbar partial-page-refresh

【解决方案1】：

首先，我很确定 facebook 为此使用了 javascript，因为它是客户端，这就是你可以做你想做的事的方式。通过禁用浏览器中的 javascript 进行测试，然后再试一次。

PHP 是服务器端，因此如果您想刷新页面的某一部分，则必须将整个页面发送回服务器，因为它将决定刷新哪个部分。

您可以做的是使用 iframe。一个带菜单的iframe，一个带内容的iframe，那么只能刷新内容的iframe。不过，由于各种原因，我并不是真正的框架粉丝。使用 Jscript 会更好:)

更新

几年来，单页应用程序（完全在浏览器中运行，无需在服务器上进行完全刷新的 web 应用程序）越来越受欢迎。

基本上，您使用 Angular 或 React 等前端 javascript 框架来编写应用程序。结果将是一个不重新加载的单页网站。

【讨论】：

【解决方案2】：

正如已经评论的那样，这是通过 JavaScript 完成的。 PHP 是一种服务器端语言，因此您的客户端可以处理这样的效果。 Facebook 使用 JavaScript，其中很多是为了在他们的网站上实现各种效果。

【讨论】：

【解决方案3】：

我认为你可以使用 iframe 来做到这一点 - 你的主要个人资料页面将包含一个 iframe - 主 URL 将是 www.example.com/profile.php?id=1234 并且当用户点击你的链接时，只有 iframe 会重新加载 URL www.example.com/profile.php?id=1234&page=1

导航链接将保持不变。

【讨论】：

【解决方案4】：

var iDiv = document.createElement('div');
iDiv.id = 'newDiv';//give u'r div an id
document.getElementsByTagName('body')[0].appendChild(iDiv); //append the div    to   your html body 
$( "#newDiv" ).insertAfter( $( "#nameOfDiv" ) ); 
                 //moving it after your desired div(which is nameOfDiv here) 
$('#newDiv').load('somePage.php'); //load desired page in newDiv 
//or 
$('#newDiv').html('some text here')

您希望您的网址看起来像www.example.com/profile.php?id=1234&page=1。请看一下 http://tutorialzine.com/2009/09/simple-ajax-website-jquery/ 很有帮助。

【讨论】：