> 웹 프론트엔드 > JS 튜토리얼 > Jquery를 기반으로 Ajax에서 요청한 page_jquery의 브라우저 뒤로 및 앞으로 기능 및 페이지 새로 고침 기능 문제를 해결합니다.

Jquery를 기반으로 Ajax에서 요청한 page_jquery의 브라우저 뒤로 및 앞으로 기능 및 페이지 새로 고침 기능 문제를 해결합니다.

WBOY
풀어 주다: 2016-05-16 18:14:10
원래의
886명이 탐색했습니다.

필수 jquery.history.js 플러그인
거인의 어깨 위에서 플러그인을 기반으로 다음 전진 및 후진 작업이 완료됩니다!
몇 가지 아르바이트를 하다가 누군가 페이지 완성을 도우다가 Ajax 요청을 했습니다. 브라우저의 새로고침, 뒤로, 앞으로 버튼이 유효하지 않은 것으로 나타났습니다. 그래서 구글링해봤습니다. 몇 가지 해결 방법을 찾았습니다. jquery.hashchange.js 플러그인 중 하나가 실패하는 경우가 있으며 페이지가 여러 번 요청되는 경우도 있습니다.
다른 플러그인을 사용해 보았는데 내 요구 사항이 완벽하게 충족되었습니다.
일반적인 아이디어는 URL에 매개변수를 추가하는 것이며, 모든 작업은 이러한 매개변수를 기반으로 완료됩니다.

코드 복사 코드는 다음과 같습니다.

//들어오는 항목에서 첫 번째 항목을 차단합니다. 문자열 필수 문자열입니다. fieldName 태그와 endTag 사이의 내용
function getQueryString(url,fieldName,tag,endTag){
var urlString = url;//document.location.href;
if(urlString != null){
var typeQu = fieldName 태그;
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 스팬") find("a").removeClass("active");
$("#topspan: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){
$("#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 작업 수행
function runAjaxGetCode(getParme)
//$("#cont").fadeOut('fast',function(){
$.ajax({
cache:false,
type:'get',
url:'sxml/searchByWord' getParme '.xml',
beforeSend:function(XMLHttpRequest){
$('
데이터가 로드 중입니다. 잠시 기다려 주세요< /div> ;')
.insertBefore( $("#cont") )
.fadeIn('slow')
},
성공: function(data,textStatus){
$( "#contul").show().find("ul").html("")
$(".quick-alert").fadeOut('slow', function(){
$ (this).remove();
$("item",data).each(function(i, domEle){
$("#contul ul").append("
  • < a href='" $(domEle).children("link").text() "'>" getParme ":" $(domEle).children("title").text() " ");
    if(($(this).index()-6)%6==0){
    $("#contul ul").append("< ;div class='clear'>
  • ");
    }
    });
    });
    },
    error: function(){
    경고( "죄송합니다. 데이터 수집에 실패했습니다. F5 키를 눌러 페이지를 새로 고친 후 다시 시도하세요. 문제가 계속되면 웹사이트 관리자에게 문의하여 해결하세요. ");
    }
    });
    // });
    }
    //매개변수 가져오기
    function getParmeter(){
    getParme=getQueryString(urlParem,' #javascript=tagCode("','','")');
    checkCode(getParme)
    }
    //getParmeter()
    //트리거 클릭
    $( "#top 스팬: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=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 플러그인 데모

    여기에서 일부 데모를 사용할 수 있으며 저장소에 포함되어 있습니다.
    이 사이트 자체는 플러그인을 기반으로 구축되었습니다.


    코드 복사

    코드는 다음과 같습니다.

    (function($){
    var origContent = "";
    function loadContent(hash) {
    if(hash != "") {
    if(origContent == "") {
    origContent = $('#content').html();
    }
    $('#content').load(hash ".html",
    function() { beautifulPrint() });
    } 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);

    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    최신 이슈
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿