基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题


Posted in Javascript onDecember 11, 2010

需要使用的 jquery.history.js插件
在巨人的肩膀之上,以下前进后退工作基于插件完成!
做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求。发现浏览器的刷新,后退,前进按钮失效。于是乎google了一下。发现了一些解决方法。其中一个jquery.hashchange.js的插件有的时候会失效,有的时候会造成页面多次请求。
换另外一个插件测试下,完美达到我的要求。
总的思路,在url上加上参数,一切工作基于这个参数完成。

//截取传入字符串中第一次出现的需要的字符串。fieldName+tag 和endTag之间的内容 
function getQueryString(url,fieldName,tag,endTag){ 
var urlString = url;//document.location.href; 
if(urlString != null){ 
var typeQu = fieldName+tag; 
var urlEnd = urlString.indexOf(typeQu); 
if(urlEnd != -1){ 
var paramsUrl = urlString.substring(urlEnd+typeQu.length); 
var isEnd = paramsUrl.indexOf(endTag); 
if(isEnd != -1){return paramsUrl.substring(0, isEnd);} 
else{return paramsUrl;} 
} 
else {return null;} 
} 
else{return null;} 
} 
//设置默认页面 
function setDefaultPage(){ 
$("#contul ul").html(""); 
$("#contul").hide(); 
$("#cont").show(); 
$("#top span").find("a").removeClass("active"); 
$("#top span:eq(0)").find("a").addClass("active"); 
} 
//检测最终字符 
function checkCode(getParme){ 
if (getParme!=null){ 
getParme=getParme.toUpperCase(); 
var codeNum=getParme.charCodeAt(0) 
} 
if(codeNum>=65&&codeNum<=91){ 
$("#top span").find("a").removeClass("active"); 
//alert((codeNum-64)); 
$("#top span:eq("+(codeNum-64)+")").find("a").addClass("active"); 
//$("#cont").html(""); 
$("#cont").hide(); 
$("#contul").find("ul").html(""); 
runAjaxGetCode(getParme); 
}else{ 
setDefaultPage(); 
} 
} 
//执行ajax操作 
function runAjaxGetCode(getParme){ 
//$("#cont").fadeOut('fast',function(){ 
$.ajax({ 
cache:false, 
type:'get', 
url:'sxml/searchByWord'+getParme+'.xml', 
beforeSend:function(XMLHttpRequest){ 
$('<div class="quick-alert">数据加载中,请稍后</div>') 
.insertBefore( $("#cont") ) 
.fadeIn('slow'); 
}, 
success: function(data,textStatus){ 
$("#contul").show().find("ul").html(""); 
$(".quick-alert").fadeOut('slow', function(){ 
$(this).remove(); 
$("item",data).each(function(i, domEle){ 
$("#contul ul").append("<li><a href='"+$(domEle).children("link").text()+"'>"+getParme+":"+$(domEle).children("title").text()+"</a></li>"); 
if(($(this).index()-6)%6==0){ 
$("#contul ul").append("<div class='clear'></div>"); 
} 
}); 
}); 
}, 
error: function(){ 
alert("对不起,数据获取失败,请F5刷新页面重新尝试\如果问题仍然存在请联系网站管理员解决。"); 
} 
}); 
// }); 
} 
//获取参数 
function getParmeter(){ 
getParme=getQueryString(urlParem,'#javascript=tagCode("','','")'); 
checkCode(getParme); 
} 
//getParmeter(); 
//点击触发 
$("#top span:gt(0)").click(function(){ 
$(".quick-alert").remove(); 
}); 
//初始化 
$.history.init(function(url) { 
//load(url == "" ? "1" : url); 
if(url.length>0){ 
getParme=getQueryString(url,'javascript=tagCode("','','")'); 
if (getParme!=null){ 
getParme=getParme.toUpperCase(); 
checkCode(getParme); 
} 
} 
else{ 
setDefaultPage(); 
} 
}); 
//页面上其他操作 
var getParme; 
//function getHash(){ 
//var curHash = location.hash; 
//alert(curHash); 
//} 
var urlParem; 
urlParem=document.location.href; 
var topHtml; 
var topHtmlLink=""; 
var $_objTop; 
$_objTop=$("#top") 
topHtml=$_objTop.html(); 
for(var i=65;i <91;i++) 
{ 
topHtmlLink+="<span><a href='#javascript=tagCode(\""+(String.fromCharCode(i+32))+"\")'>"+String.fromCharCode(i)+"</a></span>"; 
} 
$_objTop.html(topHtml+topHtmlLink);

jquery.history.js插件 Demos
Some demos are available here and included in the repository.
And this site itself is built on the plugin:
(function($){ 
var origContent = ""; 
function loadContent(hash) { 
if(hash != "") { 
if(origContent == "") { 
origContent = $('#content').html(); 
} 
$('#content').load(hash +".html", 
function(){ prettyPrint(); }); 
} else if(origContent != "") { 
$('#content').html(origContent); 
} 
} 
$(document).ready(function() { 
$.history.init(loadContent); 
$('#navigation a').click(function(e) { 
var url = $(this).attr('href'); 
url = url.replace(/^.*#/, ''); 
$.history.load(url); 
return false; 
}); 
}); 
})(jQuery);
Javascript 相关文章推荐
JAVASCRIPT HashTable
Jan 22 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
纯js实现倒计时功能
Jan 06 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 #Javascript
为超链接加上disabled后的故事
Dec 10 #Javascript
input按钮的事件处理大全
Dec 10 #Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 #Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 #Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 #Javascript
Javascript将string类型转换int类型
Dec 09 #Javascript
You might like
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
理解JavaScript中的事件
2006/09/23 Javascript
js 表单验证方法(实用)
2009/04/28 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
解读python logging模块的使用方法
2018/04/17 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
中国电视购物:快乐购
2017/02/04 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
工会工作先进事迹
2014/08/18 职场文书
2014年收银工作总结
2014/11/13 职场文书