Home > Web Front-end > JS Tutorial > Based on Jquery, solve the problem of browser back and forward function and page refresh function of Ajax requested page_jquery

Based on Jquery, solve the problem of browser back and forward function and page refresh function of Ajax requested page_jquery

WBOY
Release: 2016-05-16 18:14:10
Original
886 people have browsed it

Required jquery.history.js plug-in
On the shoulders of giants, the following forward and backward work is completed based on the plug-in!
I did a few part-time jobs, and when I was helping someone complete the page, I made an ajax request. I found that the browser's refresh, back, and forward buttons were invalid. So I googled it. Found some workarounds. One of the jquery.hashchange.js plug-ins sometimes fails, and sometimes causes the page to be requested multiple times.
I tried using another plug-in and it met my requirements perfectly.
The general idea is to add parameters to the url, and all work is completed based on these parameters.

Copy code The code is as follows:

//Intercept the first occurrence in the incoming string The required string. Content between fieldName tag and 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;}
}
//Set the default page
function setDefaultPage(){
$("#contul ul ").html("");
$("#contul").hide();
$("#cont").show();
$("#top span") .find("a").removeClass("active");
$("#top span:eq(0)").find("a").addClass("active");
}
//Detect the final character
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();
}
}
//Perform ajax operation
function runAjaxGetCode(getParme){
//$("#cont").fadeOut('fast',function(){
$.ajax({
cache:false,
type:'get',
url:'sxml/searchByWord' getParme '.xml',
beforeSend:function(XMLHttpRequest){
$('
Data is loading, please wait< /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("
  • " getParme ":" $(domEle).children("title").text() "
  • ");
    if(($(this).index()-6)%6==0){
    $("#contul ul").append("< ;div class='clear'>
    ");
    }
    });
    });
    },
    error: function(){
    alert("Sorry, data acquisition failed, please refresh the page with F5 and try again. If the problem still exists, please contact the website administrator to solve it. ");
    }
    });
    // });
    }
    //Get parameters
    function getParmeter(){
    getParme=getQueryString(urlParem,' #javascript=tagCode("','','")');
    checkCode(getParme);
    }
    //getParmeter();
    //Click trigger
    $( "#top span:gt(0)").click(function(){
    $(".quick-alert").remove();
    });
    //Initialization
    $.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();
    }
    });
    //Other operations on the page
    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 plugin Demos
    Some demos are available here and included in the repository.
    And this site itself is built on the plugin:
    Copy code The code is as follows:

    (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);
    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template