我正在开发一个用于患者管理的网站。
Web 有一个入口点(假设它是index.php)。该着陆会绘制包含菜单和内容的特定HTMLdiv
。
根据激活的菜单项,会触发一个Ajax调用,该调用会用内容填充菜单div
。
$(document).ready(function(){
$.ajax({ url: "formulario.php",
dataType: 'text',
success: function(data) {
$("#sentences").html(data);
},
error: function() {
alert("error");
}
});
});
由于所有这些都是在不更改URL的情况下发生的,因此我没有办法为特定部分定义唯一的URL 。该网站的任何访问者都只会看到默认登录页面。
是否有一个实用的解决方案来保持内容动态刷新,但同时给每个部分一个唯一的URL ?
使用哈希/哈希(符号
#
)将每个部分与其他部分区分开来。例如,如果您有“表格”、“联系人”、“历史”等部分。他们会有唯一的 URL:而且您仍然会以与现在相同的方式加载菜单(或者您可以将其更改为指向#form、#contact 等的链接,并使用onhashchange事件处理程序检测更改)。
唯一的事情是,现在用户可以使用其“深层链接”访问特定部分。然后,您应该对开始执行的代码进行一些更改,以便如果有哈希,它会检测到它并加载正确的页面而不是默认页面。更改很简单:您将读取哈希(使用
window.location.hash
)并使用开关选择要加载的 url。像这样的东西:工作示例
我将制作一个包含 4 个页面(将通过 AJAX 加载的主页面和 3 个子页面)的基本示例。我将所有代码都留在这里,但由于它不运行 PHP,我在自己的服务器上创建了一个在线演示,以便您可以看到它的工作原理。
index.php(主页):
表格.php:
历史.php:
联系方式.php:
可以看到,页面加载时,会按照hash中指示的section内容来完成(如果没有指定,会显示表单)。此外,通过每次菜单交互更改 URL,您可以按后退和前进按钮,因为更改将保存在浏览器历史记录中。
我能想到几种方法,一种是@AlvaroMontoro 告诉你的方法;另一个是通过 History API,另一个是在客户端使用路由器。
历史 API
这个 API 使用起来非常实用和直观。您有几种方法可用:
pushState
replaceState
我们最感兴趣的方法是
pushState
. 此方法向浏览器的历史记录添加一个条目。假设您单击Home,然后是Portfolio ,最后是Contact Me,那么您的域的历史堆栈将是:如果您在浏览器中单击返回,您将以反向模式遵循该顺序。
上面的代码执行以下操作:每次单击菜单时,通过
?page
在后端接收的参数检索指示菜单的部分的 HTML,并相应地发送视图。最后,更新URL,以便:使用客户端路由器
这里有几个选项,例如Page.js和Navigo。我更喜欢 Page.js,因为它看起来很像 Vue.js 的路由器。与上面相同的示例可以使用 Page.js 完成:
在这种情况下,没有必要阻止链接的默认操作,因为 Page.js 会处理这一点。您只需定义基本路径 (
<base href="/tuapp/">
) 并负责获取 HTML 并将其插入到文档中。节目