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调用成功。这将使它更加DRY。

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事件也是一种好习惯，这样您的代码就不会与其他脚本事件订阅混淆。

需要有关pushState和onpopstate的建议

3 个答案: