基于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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
javascript简单链式调用案例分析
May 10 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
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获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
Javascript的一种模块模式
2008/03/22 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
JS中的phototype详解
2017/02/04 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Django验证码的生成与使用示例
2017/05/20 Python
pycharm安装及如何导入numpy
2020/04/03 Python
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
个人思想理论学习的自我鉴定
2013/11/30 职场文书
某某同志考察材料
2014/05/28 职场文书
供用电专业求职信
2014/07/07 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
Vue实现下拉加载更多
2021/05/09 Vue.js
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python