基于Jquery.history解决ajax的前进后退问题
以下内容是关于Jquery.history解决ajax的前进后退问题,具体详情请看下文。
本文的前提是基于后台的,所以这里不会考虑seo的问题。同时,基于后台的管理系统,也不需要被收藏,所以也不会考虑刷新的这种类似直接敲网址的情况!!!
这里使用的是html5中的history.state来解决。
网上已经有了js的开源解决方案pushState。详见pjax
但是这个方案不适合我的项目(后台项目),尤其是主要的方法有点不够用。
我使用的是 jquery.history.js 可以参考这个history.js
看下面的代码
<!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title></title> <scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <scriptsrc="js/jquery.history.js"></script> </head> <body>
用户名<inputid="txtUser"type="text"/><br/>
用户id<inputid="txtId"type="text"/><br/>
显示结果
<divid="divtxtinfo"><inputid="txtinfo"type="text"/></div> <br/> <afunname="displayinfo"title="wxq"href="javascript:void(0);"class="apjax">提交</a> <br/> log: <textareaid="log"style="width:100%;height:400px"></textarea> </body> </html> <script> ///随机数 functionguid(){ functionS4(){ return(((1+Math.random())*0x10000)|0).toString(16).substring(1); } return(S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); } ///回调的方法 functiondoCallback(fn,args){ fn.apply(this,args); } ///获取查询字符串 functionGetQueryString(){ varresult=""; varurl=location.href; if(url.indexOf("?")>0){ result=url.substring(url.indexOf("?")+1,url.length); if(result!=""){ result=result+"&"; } } return"?"+result; } //用来保存地址栏的参数,第一次页面加载的时候执行。用来修改地址栏的时候,保留原始的参数 varglobalQuerystr; vargolbalState={ "globalPara":{},//js调用方法执行时用的全局js参数, "globalControlValue":{},//js需要修改value的html组件如文本类似$(“#xxx”).val() "globalControlHtml":{},//js需要修改内部html内容的html组件类似$(“#yy”).html() "CallbackFunctions":""//回调的js方法可以自己实现,用逗号分隔,一般是一个方法名 }; ///全局变量的问题globaPara保存全局变量 ///多个控件变化但是不在一个容器内的问题数组的方式History.pushState({state:1,rand:Math.random(),"globaPara":globaPara,"valuecontrol":[{"txtuser":"1"},{"txtname":"2"}]"htmlcontrol":[{"htmltxt":"<b>hello</b>"},{"htmlcheckbox1":""}]},"title","?data=1" //控件类型的问题有的保存值就行有的保存html更方便 (function(window,undefined){ globalQuerystr=GetQueryString(); var History=window.History,//Note:WeareusingacapitalHinsteadofalowerh State=History.getState(), $log=$('#log'); console.info("页面加载完毕"); History.log('initial:',State.data,State.title,State.url); //页面第一次加载的时候State没有属性 History.Adapter.bind(window,'statechange',function(){//Note:Weareusingstatechangeinsteadofpopstate //LogtheState varState=History.getState();//Note:WeareusingHistory.getState()insteadofevent.state golbalState=State.data; if(golbalState){ //修改控件的val值 if(golbalState.globalControlValue){ for(vari=0;i<golbalState.globalControlValue.length;i++){ $("#"+golbalState.globalControlValue[i].controlid).val(golbalState.globalControlValue[i].controlvalue); } } //修改全局变量 if(golbalState.globalPara){ for(vari=0;i<golbalState.globalPara.length;i++){ eval(""+golbalState.globalPara[i].globalname+"="+golbalState.globalPara[i].globalvalue+";"); } } //修改控件的html if(golbalState.globalControlHtml){ for(vari=0;i<golbalState.globalControlHtml.length;i++){ $("#"+golbalState.globalControlHtml[i].controlid).html(golbalState.globalControlHtml[i].controlhtml); } } //执行恢复参数后要执行的函数 if(golbalState.CallbackFunctions!=""){ doCallback(eval(""+golbalState.CallbackFunctions),null); } //清空函数 golbalState.CallbackFunctions=""; } History.log('statechange:',State.data,State.title,State.url); }); })(window); functiondisplayinfo(){ console.info("index:"+History.getCurrentIndex); //ajax方法,从服务器获取数据 $("#txtinfo").val("我爱"+$("#txtUser").val()+$("#txtId").val()); } $(function(){ $(".apjax").on("click",function(){ golbalState.globalControlValue=[{"controlid":"txtUser","controlvalue":$("#txtUser").val()}]; golbalState.CallbackFunctions=$(this).attr("funname"); History.pushState(golbalState,$(this).attr("title"),globalQuerystr+"rnd="+guid()); }); }) </script>
一先引用jquery和history.js 的js
二
History.Adapter.bind(window,'statechange',function(){ 表示在点击后退前进或history的js方法时,监控变化。当变化时执行自定义的方法。
History.pushState有三个参数statetitle自定义的地址查询参数。
该方法往历史记录里添加数据,修改地址栏
History.getState() 获取当前地址的state参数
三流程
1首先获取地址栏的参数并保存
2绑定包含apjax类的标记的click方法,标记可以任意,可以是diva链接按钮等
当点击的时候,保存执行ajax方法前的状态,保存到golbalState,其中回调的方法从标记的funname属性中调取,title的值从标记的title属性获取,
“globalPara": "globalControlValue":"globalControlHtml 最好在ajax的方法中赋值,如displayinfo
3History.pushState添加到历史记录,并修改地址栏
4当后退的时候,执行History.Adapter.bind中的方法,先获取state参数
5把之前js修改过的变量修改回原来的值 ,把之前修改的html组件的value的值改回原来的值,把修改过的html组件中的html内容恢复为原来的值,
6重新执行原来的执行过的方法,即CallbackFunctions中保存的方法。
以上内容给大家介绍的基于Jquery.history解决ajax的前进后退问题,代码知识起到演示的效果,重点在给大家介绍基本原理的实现。希望本文分享能够给大家带来意向不到的收获,欲了解更多有关jquery前进后退相关知识,请持续关注毛票票网站。