使用AJAX进行无缝页面更改

使用AJAX进行无缝页面更改

这称为

hashchange

事件。您可以在更改后的值而

#!

无需重新加载页面，然后可以使用AJAX加载所需的信息。如果您使用的是支持HTML5的新浏览器，则可以使用

History.pushState

类似的方式更改网址栏。

基本上，您可以向链接添加事件，更改URL（使用

location.hash

或

pushState

），然后可以通过AJAX加载数据。

这里是一个不错的例子

location.hash

，而这里的一个

pushState

。

对于一个好的跨浏览器解决方案，我建议使用History.js。

如果要使用History.js，则在将脚本添加到页面后，还需要添加一些Javascript。

$('a.hash').click(function(e){  // For all links with the class "hash"   e.preventDefault();  // Don't follow link   History.pushState(null, '', this.href);  // Change the current URL (notice the capital "H" in "History")   $('#content').slideUp('slow', function(){  // Animate it sliding up       var $this = $(this);       $this.load(this.href, function(){  // Use AJAX to load the page (or do whatever)          $this.slideUp('slow');  // Slide back down       });});