阿贾克斯加载历史“onpopsate”

Question

一整页我用它来创建一个新的状态：

//state 1 
     history.pushState({ reload: true }, 'submodulo', '?submodulo=1'); 
//state2 
     history.pushState({ reload: true }, 'submodulo', '?submodulo=2'); 
//state3 
     history.pushState({ reload: true }, 'submodulo', '?submodulo=3'); 

我想重新加载内容时，用户按下后退按钮。

window.onpopstate = function(event) { 
      if (event.state !== null && event.state.reload) { 

       location.reload(true); 

      }    
    }; 

但是，这样我就会失去状态。这就像点击一个完整的新网址。它不保留序列。有没有另一种方式来加载整个页面，但以Ajax方式？

Answer 1

您需要运行ajax调用，而不是在popstate事件上重新加载页面。

window.onpopstate = function(event) { 
    if (event.state !== null && event.state.reload) { 
       $.ajax({ 
       url: 'load-content.php', 
       success: function(response) { 
        $('#main-content').replaceWith(response);  
        } 
       }); 
    }    
}; 

在目标PHP文件中根据url或给定参数加载内容，并在成功时用生成的内容替换内容。