需要使用的 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);
转载:http://www.cnblogs.com/zhuyidong/archive/2010/12/09/1901337.html
分享到:
相关推荐
发现浏览器的刷新,后退,前进按钮失效。于是乎google了一下。发现了一些解决方法。其中一个jquery.hashchange.js的插件有的时候会失效,有的时候会造成页面多次请求。 换另外一个插件测试下,完美达到我的要求。 总...
Jquery跨域访问Web服务的demo源码
基于jquery的ajax的网络聊天室
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Object.success,但后台能够返回数据,原代码如下: var source=[]; $.ajax({ ...
主要介绍了为jquery的ajax请求添加超时timeout时间的操作方法,文中通过一段简单的代码给大家介绍jquery ajax超时设置方法,感兴趣的朋友跟随脚本之家小编一起看看吧
一个简单的Ajax实例——基于Ajax无需刷新技术开发的聊天室程序,实现多用户在网页上聊天,并可以实时更新信息。
jQuery-ajax-用户名异步请求,转载请注明出处:https://blog.csdn.net/qq_40374604(如有需要欢迎留言,我一定会尽快解答)
今天小编就为大家分享一篇jQuery中ajax请求后台返回json数据并渲染HTML的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
一个完整的jquery+ajax传送请求的实例
jquery+ajax实现无刷新提交的功能。
jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现
基于Jquery+Ajax+Json实现分页显示附效果图
本文主要给大家介绍基于Jquery.history解决ajax的前进后退问题,涉及到jquery前进后退相关方面的知识,本文内容经典,非常具有参考价值,特此把jquery前进后退相关知识分享在脚本之家网站供大家参考
jquery .ajax 局部刷新之后 刷新内容无法调用js.
基于jquery的网页对话框,可显示ajax页面
在做 ajax load 的时候,很多人都不会考虑到需要浏览器支持前进后退功能,本例让浏览器支持jquery ajax load 前进、后退 功能,需要的朋友可以参考下
基于jQuery 的Ajax完整拖动实例,可以动态添加一个新的拖动实例,可以无刷新切换网页风格,可以适时编辑模块内容,指定拖动区域。实例简单,易于理解,作为能考很不错。请在IIS下运行本实例,源码爱好者测试演示如上...
基于jquery的Ajax请求队列 用于处理优先ajax与一般ajax请求 用法 var handler = AjaxQueue.setup(), // 实例化队列对象 priority = 0; // 优先级为0是普通请求,1为高级请求。 高级请求会优先发送 // 向队列中添加...
js与jQuery实现的兼容多浏览器Ajax请求实例.docx