基于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 相关文章推荐
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
js动态创建标签示例代码
Jun 09 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
React Router v4 入坑指南(小结)
Apr 08 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 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安全技术之 实现php基本安全
2010/09/04 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
初识Node.js
2014/09/03 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
python条件和循环的使用方法
2013/11/01 Python
python字符串对其居中显示的方法
2015/07/11 Python
python如何求解两数的最大公约数
2018/09/27 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Python调用C语言程序方法解析
2020/07/07 Python
Python 内存管理机制全面分析
2021/01/16 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
村官2015年度工作总结
2015/10/14 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis