需要有關pushState和onpopstate的建議

Question

我使用ajax來加載所有頁面內容並使按鈕恢復工作我使用pushState和onpopstate如下所示：

function get_page(args){
    ....
    $.ajax({ 

        url     : '/ajax/search?' + param  ,  type : 'get', 
        success : function(data) {   

                    $('#search_aj').html(data); 

                    window.history.pushState( { url: '/ajax/search?' + param  }
                    , "" , '/search?' + param  );
        },  
    });
}

window.onpopstate = function(e) {

    if ( e.state == null ){
        location.href = location.href ;
        return;
    }

    $.ajax({ url     : e.state.url , type : 'get', 
        success : function(data) {   
            $('#search_aj').html(data); 
        },      
    });     
};

它工作但我認為我的代碼不好，因為我在Ajax中重復成功代碼，如果我在一個中做出改變，我必須在另一個中改變它。
並且代碼( e.state == null )是回到第一頁的最佳方式？

有什么建議你可以給我來增強我的代碼嗎？

Answer 1

您可以創建一個函數來調用ajax調用成功。 這將使它更干一些 。

function get_page(args){
    ....
    $.ajax({ 

        url     : '/ajax/search?' + param  ,  type : 'get', 
        success : function(data) {   
            populateSearch(data);
                window.history.pushState( { url: '/ajax/search?' + param  }, "" , '/search?' + param  );

        },  
    }); 

}




window.onpopstate = function(e) {

    if ( e.state == null ){
        location.href = location.href ;
        return;
    }

    $.ajax({ url     : e.state.url , type : 'get', 
        success : function(data) {   
            populateSearch(data);
        },      

    });     

};

function populateSearch(data)
{
    $('#search_aj').html(data);
}

Answer 2

您可以使用jQuery.ajaxSetup（）來減少需要重復代碼的位置數量。

注意：這確實會影響文件中的所有ajax調用或其中包含的任何文件。

至於( e.state == null )是最好的。 沒有太多應用程序的上下文，我真的不能想到更好的方法

Answer 3

如果您的腳本中有許多類似的小請求，則可以在將完成此任務的函數中對其進行管理。

 function makeRequest(url, successHandler) { $.get(url, function(data) { $('#search_aj').html(data); successHandler && successHandler(); }); } function get_page(args) { //... var historyURL = '/search?' + param; var reqURL = '/ajax' + historyURL; makeRequest(reqURL, function() { window.history.pushState({ url: reqURL }, '', historyURL); }); } $(window).on('popstate', function(e) { if (e.state) makeRequest(e.state.url); else location.href = location.href; }); 

 Nothing here, sorry. 

jQuery旨在編寫更少的代碼，因此您可以使用.get而不是.ajax來生成GET request 。 使用jQuery .on或native addEventListener方法訂閱DOM事件也是一種好習慣，這樣您的代碼就不會與其他腳本事件訂閱.on 。