Question

我正在开发一个Web应用程序，用户可以在不同页面（或部分视图＆＃39;）之间导航，这些页面是用AJAX加载的。我是这样做的，当用户按下浏览器中的后退和前进按钮时，应用程序返回正确的视图，具体取决于该时刻的地址栏包含的URL。

我的问题：当我通过按浏览器中的后退和前进按钮慢慢导航时，它正常工作。但是当我反复按后退或前进按钮时，它会在应用程序中加载多个视图。

我的问题：有没有办法阻止在应用程序中加载多个视图，只加载应该加载的视图？

我的代码：

$(window).on("popstate", function (e) {
    $(".UserNavigation li").removeClass("active");
        LoadContent.init();
    })

    var LoadContent = {
    init: function (url, query) {

        var Content = { }
        var PathName;

        if (url == null) {
            PathName = window.location.pathname;
            Content.url = "ContentArea/" + PathName;
        }    
        else {
            var Controller = "ContentArea/"
            Content.url = Controller + url
        }            

        if (query)
            Content.query = query       

        LoadContent.Loading(this);

        xhr = $.ajax({
            type: "POST",
            url: Content.url,
            data: { query: Content.query, type: 0 },
            success: function (data) {  

                LoadContent.ApplyContent(data);

            },
            error: function () {

            },
            complete: function (data) {
                if (url != null)
                    LoadContent.UpdateHistory(data, url);
            }
        })
    },

    ApplyContent: function (data) {
        $("#ContentLoading").animate({
            opacity: 0
        }, 200, function () {
            $("#ContentLoading").addClass("hidden");
            $("#ContentArea").append(data).addClass("visible");
            LoadContent.UpdateMenu();
        })

        return this;
    },

    Loading: function () {
        $("#ContentArea").children().remove();
        $("#ContentLoading").removeClass("hidden");
        $("#ContentArea").removeClass("visible");
        $("#ContentLoading").animate({
            opacity: 1
        }, 200)
    },

    UpdateHistory: function (data, url) {
        var DataToSave = {
            StateURL: url,
        }

        history.pushState(DataToSave.StateURL, url, url)
    },

    UpdateMenu: function () {
        var CurrentPath = window.location.pathname;
        $(".UserNavigation li").removeClass("active");
        $("[href='" + CurrentPath + "']").parent().addClass("active");
    }
}

Answer 1

在你的情况下，ajax响应加载数据，如果你发送多个请求会发生什么，当然ajax数据（视图）替换旧的。所以你需要停止以前的ajax请求

 if (typeof this.xhr !== 'undefined')
       this.xhr.abort();

以上代码停止上一个ajax请求

 this.xhr = $.ajax({
    type: "POST",
    url: Content.url,
    data: { query: Content.query, type: 0 },
    success: function (data) {  

        LoadContent.ApplyContent(data);

    },
    error: function () {

    },
    complete: function (data) {
        if (url != null)
            LoadContent.UpdateHistory(data, url);
    }
})

Answer 2

在以下部分

ApplyContent: function (data) {
    $("#ContentLoading").animate({
        opacity: 0
    }, 200, function () {
        $("#ContentLoading").addClass("hidden");
        $("#ContentArea").append(data).addClass("visible");
        LoadContent.UpdateMenu();
    })

    return this;
},

将.append()更改为.html()。这样可以防止额外的内容填满更多空间，但完全取代了#ContentArea。

的html

就像Parth所说，你也应该中止正在运行的Ajax请求并启动一个新的请求。这不会阻止服务器向您发送结果，因此最好在发送新服务时取消服务器上的所有旧请求。

如何使用后退和前进按钮快速导航时阻止加载多个视图

2 个答案: