当前位置:Gxlcms > JavaScript > 基于Jquery解决Ajax请求的页面浏览器后退前进功能,页面刷新功能实效问题_jquery

基于Jquery解决Ajax请求的页面浏览器后退前进功能,页面刷新功能实效问题_jquery

时间:2021-07-01 10:21:17 帮助过:76人阅读

需要使用的 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){
$('
数据加载中,请稍后
')
.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("
  • "+getParme+":"+$(domEle).children("title").text()+"
  • ");
    if(($(this).index()-6)%6==0){
    $("#contul ul").append("
    ");
    }
    });
    });
    },
    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+=""+String.fromCharCode(i)+"";
    }
    $_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);

    人气教程排行