基于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 浏览器检测代码精简版
Mar 04 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
python创建关联数组(字典)的方法
2015/05/04 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
超简单的Python HTTP服务
2019/07/22 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
个人社会实践自我鉴定
2014/03/24 职场文书
个人贷款担保书
2014/04/01 职场文书
美术课外活动总结
2014/07/08 职场文书
2014最新实习证明模板
2014/10/02 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
任命书标准格式
2015/03/02 职场文书
超市员工辞职信范文
2015/05/12 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
sql中mod()函数取余数的用法
2021/05/29 SQL Server