基于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 相关文章推荐
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
vue解决跨域问题(推荐)
Nov 10 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
php随机显示图片的简单示例
2014/02/15 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Python使用minidom读写xml的方法
2015/06/03 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
tensorflow如何批量读取图片
2019/08/29 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
综合实践活动方案
2014/02/14 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
城管大队整治方案
2014/05/06 职场文书
消防宣传口号
2014/06/16 职场文书
创文明城市标语
2014/06/16 职场文书
民政局个人整改措施
2014/09/24 职场文书
2014年资料员工作总结
2014/11/18 职场文书
电信营业员岗位职责
2015/04/14 职场文书
休假证明书
2015/06/24 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android