我有一个基于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有点陌生,所以我不知道我缺少什么,但是到目前为止,这是我的问题:
当我按下“返回”按钮时,什么也没发生。我阅读了有关“ popstate”的内容,并浏览了SO来寻找解决方案,但我似乎无法使它们正常工作。
当我单击历史记录中的链接时,我获得了子html的“原始”视图,而没有来自主html的布局。如果我希望它像从主应用程序中单击一样显示,该怎么办?
我的大多数子视图都是表格或列表。
此代码应该可以帮助您:
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); }); });