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

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

WBOY
Freigeben: 2016-05-16 18:14:10
Original
885 Leute haben es durchsucht

需要使用的 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$("#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 {
    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);
    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage