(转)基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题。 ajaxjquery跳转刷新
程序员文章站
2024-03-15 08:04:59
...
需要使用的 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