Question

我有一个jquery脚本，可以使用pushstate和Ajax更改页面内容。

现在它工作正常但是当我回到浏览器按钮时，popstate事件再次执行Ajax查询。

是否可以保存状态并加载上一个视图而无需再次执行Ajax查询？

我已经读过关于e.originalEvent.state的popstate，但我不知道它是否能做同样的事情或者没有。

$(document).ready(function () {

    function loadPage(route) {
    $.ajax({
        type: 'get',
        dataType: 'html',
        url: route,
        success: function (msg) {
            if (msg === undefined) {
                alert('error');
            } else {                    
                $('#content').html(
                    $(msg).find('#content')
                );
            }
        }
    });

}


$(window).on("popstate", function () {
    //This function will always execute Ajax query again
    // but I'd like to not executing  Ajax query again after popstate event
    loadPage(window.location.href);

});

$(document).on('click', ".load-ajax", function (e) {
    e.preventDefault();

    var route = $(this).attr('href');

    window.history.pushState(null, "Title", route);

    loadPage(route);

});

});

Answer 1

基本上是的。您可以通过在历史对象中存储AJAX的结果来实现。这意味着您必须在返回中执行pushState：AJAX调用成功。然后在popstate期间，您将再次读取该数据。

你可以将你想要的任何对象传递给pushState方法，例如在这里我创建一个任意对象（用于隐藏和显示div）：

lastPageState = { div:divName, pos:amount, page:lastLoadedPage };
history.pushState(lastPageState, divName.substring(1,divName.length-6), "index.html");

您只需要使lastPageState对象包含AJAX调用返回的数据。

这样的事情：

    success: function (msg) {
        if (msg === undefined) {
            alert('error');
        } else {                    
            $('#content').html(
                $(msg).find('#content')
            );
            //new code
            var state = {data:$(msg).find('#content')};
            window.history.pushState(state, "Title", "index.html");
        }
    }

...

$(window).on("popstate", function () {
    $('#content').html(event.state.data);
});

Answer 2

现在我的代码是这样的，popstate工作得很好除了初始页面，它经常加载而不是pushState没有工作

$(window).on("popstate", function () {
    $('#main').html(event.state.data);
});

$(document).on('submit', "#search-form", function (e) {
    e.preventDefault();

    //...
    $.ajax({
        url: url,
        type: type,
        data: data,
        dataType: 'html',
        beforeSend: function () {
            //...
        },
        success: function (html) {
            console.log('Success');
            //..
            var state = {data: $('#main').html()};
            window.history.pushState(state, "Title", url);
        },
        error: function (XHR, status, error) {
            //..
        }
    });

});

如何在popstate之后不再执行Ajax查询

2 个答案: