小编典典

在jQuery Ajax上使用history.pushstate

ajax

我有一个基于ajax的应用程序,其中我只有一个登录页面和主页。

我的大多数链接都是“ ajaxed”的,我这样做的方式是:

//get the href of the link that has been clicked, ajaxify ANY links

$(document).on('click', '.tree a', function () {

            var link = $(this).attr('href');  //get the href off the list
            $.ajax({                          //ajax request to post the partial View
                url: link,
                type: 'POST',
                cache: false,
                success: function (result) {
                    $('#target').html(result);
                    $.validator.unobtrusive.parse($("form#ValidateForm"));
                }
            });
            return false; //intercept the link
   });

我想在我的应用程序上实现“ pushState”,到目前为止,我要做的第一步是添加以下代码:

$(document).on('click', 'a', function () {
            history.pushState({}, '', $(this).attr("href"));
 });

现在,只要我单击任何链接,就会更新我的地址栏,并且ajax内容会成功加载。我对这个API有点陌生,所以我不知道我缺少什么,但是到目前为止,这是我的问题:

  1. 当我按下“返回”按钮时,什么也没发生。我阅读了有关“ popstate”的内容,并浏览了SO来寻找解决方案,但我似乎无法使它们正常工作。

  2. 当我单击历史记录中的链接时,我获得了子html的“原始”视图,而没有来自主html的布局。如果我希望它像从主应用程序中单击一样显示,该怎么办?

我的大多数子视图都是表格或列表。


阅读 281

收藏
2020-07-26

共1个答案

小编典典

此代码应该可以帮助您:

function openURL(href){

        var link = href;  //$(this).attr('href');                                    
        $.ajax({                                                             
            url: link,
            type: 'POST',
            cache: false,
            success: function (result) {
                $('#target').html(result);
                $.validator.unobtrusive.parse($("form#ValidateForm"));
            }
        });
        window.history.pushState({href: href}, '', href);
}

$(document).ready(function() {

   $(document).on('click', 'a', function () {
     openURL($(this).attr("href"));
     return false; //intercept the link
   });

   window.addEventListener('popstate', function(e){
      if(e.state)
        openURL(e.state.href);
   });

});
2020-07-26