基于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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
Python3中的2to3转换工具使用示例
2015/06/12 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
几款好用的python工具库(小结)
2020/10/20 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
个人现实表现材料
2014/02/04 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
公司新年寄语
2014/04/04 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
分公司负责人任命书
2014/06/04 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android