基于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/Css 文件的代码
Jul 03 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 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
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
使用Python对Excel进行读写操作
2017/03/30 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
python实现简易数码时钟
2021/02/19 Python
python各类经纬度转换的实例代码
2019/08/08 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
少先队活动总结
2014/08/29 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
python中urllib包的网络请求教程
2022/04/19 Python