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

需要使用的 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);

 

 最终请参阅演示地址：点击这里  转载请注明出处。



转载于:https://www.cnblogs.com/zhuyidong/archive/2010/12/09/1901337.html