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

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$("#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')
.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() " a>

");
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 {
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);