使用 Ajax 进行分页时，Chrome 后退按钮不会保留 url 历史记录

Question

请帮助我。我最近使用 ajax 进行 Laravel 分页。每当我点击他的后退按钮时。它不会返回到我来自的页面。它回到第一页。让我清楚地说明这一点。 (1) 我有一个用 jquery ajax 分页的项目列表。 (2) 当我访问第 5 页（例如）并单击某个项目以查看该项目的详细信息并决定单击浏览器后退按钮时，预计我将返回到我所在的第 5 页。相反，我被带回到第一页。 (3) 这只发生在chrome相关浏览器中。它在 Firefox 中运行良好；

//下面是我的 AJAX 代码；

$(文档).ready(函数(){

$(document).on('click','.pagination a',function(e){
    e.preventDefault();
    var pageNumber = $(this).attr('href').split('page=')[1];
    getMorePage(pageNumber)
});

function getMorePage(page) {
    $.ajax({
        url: "/all-products-ajax/"+"?page="+page,
        type: "get",
        datatype: "html"
    }).done(function (data) {
        $('#product-view').html(data); 
    }).fail(function () {
        alert('Posts could not be loaded.');
    });
}

});

Answer 1

Ajax 查询与浏览网页不同。您可能需要将新路由注册到浏览器历史记录。

https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

您可能想查看这里。

Answer 2

在 HTML 文档中，history.pushState() 方法会向浏览器的会话历史堆栈添加一个条目。

window.history.pushState("", "", url);