基于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前进后退相关知识，请持续关注毛票票网站。