Ajax加载与点击浏览器后退按钮 回退
缘起在开发一个应用系统特别是做后台管理系统的时候,每次刷新全部页面即浪费流量,又消耗服务器资源、还会让界面闪动,用户体验不好,这是为什么要使用Ajax的原因。 而使用了Ajax后,发现使用浏览器的后退键不管用了。这很不方便,这就需要使用html5提供的history功能。 思路ajax加载这用jquery很简单,看代码 $("#mycontent").load(url);
这样就将url中的html片段加载到id为mycontent的div之中了。 如何让history知道加载了新页面使用 history.pushState(state,title,url)。 可以看到这有三个参数,第一个参数存储一些自定义的信息,比如ajax块的url之类。第二个参数没啥用。 第三个参数影响浏览器地址栏显示的url。这个url可以处理一下,让用户点击刷新浏览器按钮时也能正确进入这个ajax页。 http://127.0.0.1:1985/?child=/case/list?type=flfg&title=%E6%B3%95%E8%A7%84%E5%88%97%E8%A1%A8
child参数为ajax页需要加载的url,这样主页发现有child参数时就加载它。 如何知道用户点击了回退用户点击后退键会触发popstate事件。 在此事件中从state中读取到url,并加载到DIV中。 绑定哪些a标签并非所有的超链接都需要在div中显示, 这时候需要加一个选择器, 我用的方法是为a标签加一个class。 如何让div中ajax加载的网页中的连接继续使用ajax加载如上图中的列表中的连接点击后如何仍在div中显示。 对于jquery datatable 这种动态生成的连接,如何绑定在连接动态生成完成以后,再调用绑定函数,下面例子中绑定函数为bindDivA这个函数。 table.on( 'draw',function () {
console.log( 'Redraw occurred at: '+new Date().getTime() );
bindDivA();
} );
题外话 jquery datatable如何保存状态这是个很好用的空间, 它有stateSave功能。 var table = $('#example2').DataTable( {
"processing": true,"serverSide": true,"ajax": {
"url": "/case/listJSON?type=${type}","type": "POST"
},"columns": [
{'data': 'id'},{'data': 'title'},{'data': 'type'},{'data': 'qi'},{'data': 'addtm'},{'data': 'cat'},],"columnDefs": [ {
"targets": 1,"data": "title","render": function ( data,type,row,meta ) {
//console.log(row);
var id = row["id"];
return "<a class='inframe' href='/case/one?id={0}'>{1}</a>".format(""+id,data);
}
} ],stateSave: true,stateSaveCallback: function(settings,data) {
localStorage.setItem( 'clist_DataTables_' + settings.sInstance,JSON.stringify(data) )
},stateLoadCallback: function(settings) {
return JSON.parse( localStorage.getItem( 'clist_DataTables_' + settings.sInstance ) )
}
} );
写的时候掉进去的一个坑刚开始调试的时候, 发现有的能回退有的不能回退。查了发现click函数忘了写return false; 直接上代码//-------------------- 历史管理 -----------------------------------
function loadToDiv(url,usePush){
$("#mycontent").load(url,function (e) {
bindDivA();
});
if(title){
$("#contentHeader").html(title);
}
var state = { 'pageurl':url,'pagetitle':title};
if(usePush){
console.log("push state of "+state);
history.pushState(state,"/?child="+url+"&title="+$("#contentHeader").text());
}
}
function bindDivA(){
console.log("bindInframeA called");
$(".inframe").bind("click",function(e){
//var href = this.href;
var href = $(this).attr("href");
var title = $(this).text();
console.log("visit href "+href);
loadToDiv(href,true);
return false;
});
}
$(document).ready(function(){
bindDivA();
});
if (history.pushState) {
window.addEventListener("popstate",function() {
console.log("popstate called,href="+location.href +",state = "+history.state);
if(! history.state) return;
console.log(history.state);
loadToDiv(history.state.pageurl,history.state.pagetitle,false);
});
}
//-------------------- 历史管理 结束 -----------------------------------
我不想搞懂,如何简单使用?1 将这个代码写入自己的js文件中,在页面中引用。 ok了。 参考[1] http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/comment-page-1/#comment-382378 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |