使用 AJAX/jQuery 动态更改页面内容并设置哈希答案

【问题标题】：Dynamically Change Page Content and Set Hash with AJAX/jQuery使用 AJAX/jQuery 动态更改页面内容并设置哈希
【发布时间】：2014-12-03 09:20:51
【问题描述】：

我正在尝试创建一个使用 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 他们将看到第一个项目的内容，而不是可供选择的原始项目列表。

【问题讨论】：

看看history.js。它以同样适用于 HTML4 浏览器的方式包装 HTML URL 重写（通过在这些浏览器上使用主题标签）。它提供了更改事件，您可以使用它来执行您想要的动态导航..

标签： javascript jquery html ajax history

【解决方案1】：

我建议使用库来处理 URL 和 paths

http://github.com/flatiron/director

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

【讨论】：

【解决方案2】：

如果你想使用标准 # 那么你可以通过 js 在函数调用中使用 do ： window.location.hash = valueYouWantToSet，主要是一些ID，

然后你可以检查页面加载是否有一个#然后调用一个特定的函数，比如：

handleHash: function () { if (!isNaN(parseInt(window.location.hash.replace('#', '')))){ this.showDetails(window.location.hash.replace('#', '')); }

【讨论】：