提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery浏览器AJAX 问题 解决 功能 基于 页面
2023-06-13 09:14:25 时间
需要使用的jquery.history.js插件
在巨人的肩膀之上，以下前进后退工作基于插件完成！
做了几个兼职，上天帮人完成页面的时候顺便做了一个ajax的请求。发现浏览器的刷新，后退，前进按钮失效。于是乎google了一下。发现了一些解决方法。其中一个jquery.hashchange.js的插件有的时候会失效，有的时候会造成页面多次请求。
换另外一个插件测试下，完美达到我的要求。
总的思路，在url上加上参数，一切工作基于这个参数完成。
复制代码代码如下:

//截取传入字符串中第一次出现的需要的字符串。fieldName+tag和endTag之间的内容
functiongetQueryString(url,fieldName,tag,endTag){
varurlString=url;//document.location.href;
if(urlString!=null){
vartypeQu=fieldName+tag;
varurlEnd=urlString.indexOf(typeQu);
if(urlEnd!=-1){
varparamsUrl=urlString.substring(urlEnd+typeQu.length);
varisEnd=paramsUrl.indexOf(endTag);
if(isEnd!=-1){returnparamsUrl.substring(0,isEnd);}
else{returnparamsUrl;}
}
else{returnnull;}
}
else{returnnull;}
}
//设置默认页面
functionsetDefaultPage(){
$("#contulul").html("");
$("#contul").hide();
$("#cont").show();
$("#topspan").find("a").removeClass("active");
$("#topspan:eq(0)").find("a").addClass("active");
}
//检测最终字符
functioncheckCode(getParme){
if(getParme!=null){
getParme=getParme.toUpperCase();
varcodeNum=getParme.charCodeAt(0)
}
if(codeNum>=65&&codeNum<=91){
$("#topspan").find("a").removeClass("active");
//alert((codeNum-64));
$("#topspan:eq("+(codeNum-64)+")").find("a").addClass("active");
//$("#cont").html("");
$("#cont").hide();
$("#contul").find("ul").html("");
runAjaxGetCode(getParme);
}else{
setDefaultPage();
}
}
//执行ajax操作
functionrunAjaxGetCode(getParme){
//$("#cont").fadeOut("fast",function(){
$.ajax({
cache:false,
type:"get",
url:"sxml/searchByWord"+getParme+".xml",
beforeSend:function(XMLHttpRequest){
$("<divclass="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){
$("#contulul").append("<li><ahref=""+$(domEle).children("link").text()+"">"+getParme+":"+$(domEle).children("title").text()+"</a></li>");
if(($(this).index()-6)%6==0){
$("#contulul").append("<divclass="clear"></div>");
}
});
});
},
error:function(){
alert("对不起，数据获取失败,请F5刷新页面重新尝试\如果问题仍然存在请联系网站管理员解决。");
}
});
//});
}
//获取参数
functiongetParmeter(){
getParme=getQueryString(urlParem,"#javascript=tagCode("","","")");
checkCode(getParme);
}
//getParmeter();
//点击触发
$("#topspan: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();
}
});
//页面上其他操作
vargetParme;
//functiongetHash(){
//varcurHash=location.hash;
//alert(curHash);
//}
varurlParem;
urlParem=document.location.href;
vartopHtml;
vartopHtmlLink="";
var$_objTop;
$_objTop=$("#top")
topHtml=$_objTop.html();
for(vari=65;i<91;i++)
{
topHtmlLink+="<span><ahref="#javascript=tagCode(\""+(String.fromCharCode(i+32))+"\")">"+String.fromCharCode(i)+"</a></span>";
}
$_objTop.html(topHtml+topHtmlLink);

jquery.history.js插件Demos
Somedemosareavailablehereandincludedintherepository.
Andthissiteitselfisbuiltontheplugin:
复制代码代码如下:

(function($){
varorigContent="";
functionloadContent(hash){
if(hash!=""){
if(origContent==""){
origContent=$("#content").html();
}
$("#content").load(hash+".html",
function(){prettyPrint();});
}elseif(origContent!=""){
$("#content").html(origContent);
}
}
$(document).ready(function(){
$.history.init(loadContent);
$("#navigationa").click(function(e){
varurl=$(this).attr("href");
url=url.replace(/^.*#/,"");
$.history.load(url);
returnfalse;
});
});
})(jQuery);

相关文章