基于Jquery 解決Ajax請求的頁面 瀏覽器后退前進(jìn)功能,頁面刷新功能實(shí)效問題
更新時(shí)間:2010年12月11日 14:04:04 作者:
做了幾個(gè)兼職,上天幫人完成頁面的時(shí)候順便做了一個(gè)ajax的請求。發(fā)現(xiàn)瀏覽器的刷新,后退,前進(jìn)按鈕失效。于是乎google了一下。
需要使用的 jquery.history.js插件
在巨人的肩膀之上,以下前進(jìn)后退工作基于插件完成!
做了幾個(gè)兼職,上天幫人完成頁面的時(shí)候順便做了一個(gè)ajax的請求。發(fā)現(xiàn)瀏覽器的刷新,后退,前進(jìn)按鈕失效。于是乎google了一下。發(fā)現(xiàn)了一些解決方法。其中一個(gè)jquery.hashchange.js的插件有的時(shí)候會失效,有的時(shí)候會造成頁面多次請求。
換另外一個(gè)插件測試下,完美達(dá)到我的要求。
總的思路,在url上加上參數(shù),一切工作基于這個(gè)參數(shù)完成。
//截取傳入字符串中第一次出現(xiàn)的需要的字符串。fieldName+tag 和endTag之間的內(nèi)容
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;}
}
//設(shè)置默認(rèn)頁面
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();
}
}
//執(zhí)行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">數(shù)據(jù)加載中,請稍后</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("對不起,數(shù)據(jù)獲取失敗,請F(tuán)5刷新頁面重新嘗試\如果問題仍然存在請聯(lián)系網(wǎng)站管理員解決。");
}
});
// });
}
//獲取參數(shù)
function getParmeter(){
getParme=getQueryString(urlParem,'#javascript=tagCode("','','")');
checkCode(getParme);
}
//getParmeter();
//點(diǎn)擊觸發(fā)
$("#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);
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);
在巨人的肩膀之上,以下前進(jìn)后退工作基于插件完成!
做了幾個(gè)兼職,上天幫人完成頁面的時(shí)候順便做了一個(gè)ajax的請求。發(fā)現(xiàn)瀏覽器的刷新,后退,前進(jìn)按鈕失效。于是乎google了一下。發(fā)現(xiàn)了一些解決方法。其中一個(gè)jquery.hashchange.js的插件有的時(shí)候會失效,有的時(shí)候會造成頁面多次請求。
換另外一個(gè)插件測試下,完美達(dá)到我的要求。
總的思路,在url上加上參數(shù),一切工作基于這個(gè)參數(shù)完成。
復(fù)制代碼 代碼如下:
//截取傳入字符串中第一次出現(xiàn)的需要的字符串。fieldName+tag 和endTag之間的內(nèi)容
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;}
}
//設(shè)置默認(rèn)頁面
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();
}
}
//執(zhí)行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">數(shù)據(jù)加載中,請稍后</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("對不起,數(shù)據(jù)獲取失敗,請F(tuán)5刷新頁面重新嘗試\如果問題仍然存在請聯(lián)系網(wǎng)站管理員解決。");
}
});
// });
}
//獲取參數(shù)
function getParmeter(){
getParme=getQueryString(urlParem,'#javascript=tagCode("','','")');
checkCode(getParme);
}
//getParmeter();
//點(diǎn)擊觸發(fā)
$("#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);
jquery.history.js插件 Demos
Some demos are available here and included in the repository.
And this site itself is built on the plugin:
復(fù)制代碼 代碼如下:
(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);
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)AJAX定時(shí)刷新局部頁面實(shí)例
- JS+Ajax+Jquery實(shí)現(xiàn)頁面無刷新分頁以及分組 超強(qiáng)的實(shí)現(xiàn)
- Ajax實(shí)現(xiàn)頁面自動刷新實(shí)例解析
- django+js+ajax實(shí)現(xiàn)刷新頁面的方法
- Ajax回退刷新頁面問題的解決辦法
- ajax頁面無刷新 IE下遭遇Ajax緩存導(dǎo)致數(shù)據(jù)不更新的問題
- 使用ajax實(shí)現(xiàn)無刷新改變頁面內(nèi)容和地址欄URL
- Ajax+php數(shù)據(jù)交互并且局部刷新頁面的實(shí)現(xiàn)詳解
- 淺談Ajax技術(shù)實(shí)現(xiàn)頁面無刷新
- AJAX實(shí)現(xiàn)指定部分頁面刷新效果
相關(guān)文章
jquery判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05jQuery特殊符號轉(zhuǎn)義的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨Query特殊符號轉(zhuǎn)義的實(shí)現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11jQuery - AJAX load() 實(shí)例用法詳解
這篇文章主要介紹了jQuery - AJAX load() 實(shí)例用法以及相關(guān)知識點(diǎn)總結(jié),有需要的朋友們參考下。2019-08-08用js實(shí)現(xiàn)的模擬jquery的animate自定義動畫(2.5K)
模仿jquery的animate寫了一個(gè)簡單的動畫實(shí)現(xiàn)方法。2010-07-07jQuery Easy UI中根據(jù)第一個(gè)下拉框選中的值設(shè)置第二個(gè)下拉框是否可以編輯
這篇文章主要介紹了jQuery Easy UI中根據(jù)第一個(gè)下拉框選中的值設(shè)置第二個(gè)下拉框是否可以編輯的相關(guān)資料,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11jQery使網(wǎng)頁在顯示器上居中顯示適用于任何分辨率
這篇文章主要介紹了jQery使網(wǎng)頁在任何分辨率的顯示器上居中顯示的方法,需要的朋友可以參考下2014-06-06