基于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实现重发验证码按钮倒数功能
Apr 21 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
解析csv数据导入mysql的方法
2013/07/01 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
介绍Python中几个常用的类方法
2015/04/08 Python
Python闭包实现计数器的方法
2015/05/05 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
应聘护士自荐信
2013/10/21 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
学校师德师风整改方案
2014/10/28 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
导游词之山西-五老峰
2019/10/07 职场文书