实现Web 2.0导航系统的最佳方法
-
15-09-2020 - |
题
现在是我的情况:我正在制作一个cms。单击链接时,我希望页面使用Ajax动态加载。链接中的问题!
更改地址栏中地址的唯一方法是使用锚标记。但PHP没有得到锚标记,因此我无法使用PHP加载站点加载页面内容。 如果我要使用查询字符串加载页面,则无法在点击链接中的地址栏中更新查询字符串,因为这将重新加载页面。
我假设JavaScript可以检查地址,将锚标记保存在cookie中并重新加载页面,但我宁愿不必转到这样的长度。
有谁知道这个问题的解决方案吗?
解决方案
很久以前有一个类似的问题,我想出了以下解决方案。
您的URL应该指向真实页面,以便让它在禁用用户的工作。单击处理程序应处理AJAX请求。哈希应包含URL,以及一个像素划线的零件,以指示请求的类型。
如果请求来自ajax,只需发送内容。如果不是,请将内容包装到页眉和页脚中以响应完整站点。
URL应该使用链接到Ajax生成的哈希物并将其用作链接。整个想法基本上模仿你可以在Facebook上看到的那种行为。
javascript
// click handler for ajax links
function goToWithAjax(hash) {
hash = hash.href ? hash.getAttribute("href", 2) : hash;
ajax( hash, function( response ) {
document.getElementById("content").innerHTML = response;
});
hash = ("#!/" + hash).replace("//","/");
window.location.hash = hash;
return false;
}
.
.htaccess
auto_prepend_file = "prepend.php"
auto_append_file = "append.php"
.
prepend
$url = $_SERVER['REQUEST_URI'];
$parts = explode('#!', $url);
$hash = isset($parts[1]) ? $parts[1] : false;
// redirect if there is a hash part
if ($hash) {
header("Location: $hash");
}
// find out if it's an ajax request
$ajax = strstr($url, "&ajax");
// we need header if it's not ajax
if (!$ajax) {
get_header();
}
.
附加
// we need footer if it's not ajax
if (!$ajax) {
get_footer();
}
.
get_header()
function get_header() {
echo <<< END
<html>
<head></head>
<body>
<div id="page">
<div id="header">
<div id="logo"></div>
<ul id="nav">menu...</ul>
</div>
<div id="content">
END;
}
.
get_footer()
function get_footer() {
echo <<< END
</div> <!-- end of #content --->
<div id="footer">(c) me</footer>
</div> <!-- end of #page --->
</body>
</html>
END;
}
. 其他提示
I can see why you might want to load parts of the page with ajax. A whole page is rather pointless though.
A jQuery solution might be something like:
$(a.ajax_link).click(function(){
var url = $(this).attr('href');
$.ajax({
url:url,
success:function(data) {
$('body').html(data);
return false;
}
});
});
I have in no way tested that, but it should still work without javascript enabled.