我正在使用history.js更新我的网站,效果很好。它是一个基于PHP的网上商店,如果它检测到ajax请求,则仅使用主div的数据提供JSON:
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH'])
&& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {}
在加载时,我ajaxify我的链接,一种从history.js'github:https://github.com/browserstate/History.js/
采取的方法function ajaxify() {
var History = window.History;
$('a[rel="ajax"]').click(function(e){
if(History.enabled) {
e.preventDefault();
var url = $(this).attr("href");
var options = {};
History.pushState(null, 'Shop', url);
}
else {
window.location.replace(url);
}
});
}
继承事件处理程序:
History.Adapter.bind(window,'statechange',function(){
var State = History.getState();
var returnLocation = history.location || document.location;
var url = returnLocation.pathname;
var options = searchString(returnLocation.search);
shopUpdate(url,options)
});
这是ajax电话:
function shopUpdate(url,options) {
$.ajax({
url: url,
type: "GET",
dataType:'json',
data: options,
success: function(data, textStatus, jqXHR){
$('#shop').html(data.page);
ajaxify();
}
});
}
在场景中打破了一切:某些链接不是“ajaxified”,当我点击几个ajax链接,然后是“常规”链接,然后“返回”我得到原始JSON输出。 Url是对的,当我重新加载时,我得到了我想要的页面。这就像PHP认为它是Ajax并提供JSON,但是自从我通过常规链接到达后,History statechange不会触发。我很困惑,感谢任何帮助!
谢谢, 托马斯
答案 0 :(得分:1)
原来这是Chrome,后退按钮和缓存的问题。我将Cache-Control: no-store
添加到JSON标题中,现在它可以正常工作。