基于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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
js计数器代码
Nov 04 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
Html5生成验证码的示例代码
May 10 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
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
Vue.js基础知识小结
2017/01/13 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python实现在windows下操作word的方法
2015/04/28 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python制作数据导入导出工具
2015/07/31 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
大学生活自我评价
2014/04/09 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
五一劳动节慰问信
2015/02/14 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
百家讲坛观后感
2015/06/12 职场文书
2016十一国庆节感言
2015/12/09 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
欧元符号 €
2022/02/17 杂记