javascript - 使用 AJAX/jQuery 动态更改页面内容并设置哈希值

Question

我正在尝试创建一个使用 AJAX 动态填充 div 的网页。我可以使用以下 AJAX 代码简单地更新 div 内容:

$(document).ready(function(){
    $("#projects-list a").click(function(e){ 
        e.preventDefault();
        var url = $(this).attr('href'); //get the link you want to load data from
        $.ajax({ 
            type: 'GET',
            url: url,
            success: function(data) { 
                $('#content').fadeOut(300, function() {
                    $('#content').html(data).delay(200).fadeIn(300);
                });
            } 
        }); 
    });
});

但是，我也希望找到一种方法来更新页面 URL 或更改哈希值。例如，当用户获得 /projects.html 的链接时，他们将被发送到链接页面，然后当单击链接时，将使用 AJAX 更改内容，并且 url 将更改为/projects.html#first。这样，用户导航到 /projects.html#first 时，他们将看到第一个项目的内容，而不是可供选择的原始项目列表。

Answer 1

我建议使用库来处理URL和路径

http://github.com/flatiron/director

http://balupton.github.com/history.js/demo