欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

(转)基于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