jQuery + Ajax 哈希/历史等等

Question

我正在尝试使用 jQuery 中的 URL 哈希来控制 Ajax 中的历史记录并使链接/页面可添加书签。我已经尝试了几乎所有插件，但似乎都无法正常工作，所以我实际上没有任何代码示例。但我愿意接受任何建议、信息、教程等。

我试图将其合并到其中的一个页面的不同之处在于，我有一个 jQuery 动画驱动的启动/加载页面，这也是所有页面的同一页面内容将被加载到。

..在此链接上，我想绕过所有启动/加载动画并直接根据哈希值/字符串（在本例中为#home）加载内容。

我已经尝试解决这个问题有一段时间了，非常感谢任何帮助，谢谢！

Answer 1

那么你有什么问题吗？设置哈希标签或处理哈希的更改？

当然，设置哈希值只是将哈希值放入链接中的问题，例如 Link 但是我猜这不是你的问题。

要实际对哈希执行某些操作，您必须有一个侦听器函数，例如每 100 毫秒检查一次哈希是否发生更改并采取相应的操作。一个简单的函数可以像这样：

$(function() {
    var current_hash = false;
    setInterval(function() {
        if(window.location.hash != current_hash) {
            current_hash = window.location.hash;
            $('#content').load("content.php?page="+current_hash);
        }        
    }, 100);    
});

该（未经测试的）函数将每 100 毫秒检查一次哈希是否已更改，如果已更改，则通过 Ajax 更新页面。

此函数也适用于页面加载，因此如果用户通过诸如 www.voidsync.com/2010/#images 之类的链接登陆页面，该函数将自动加载页面“图像”。所以历史和书签是有效的。

希望有帮助，只是问你是否还有别的意思。

Answer 2

根据塔图的回答，我只是改变了一些东西来使这项工作适合我。
它保留了历史记录，因此后退和前进按钮效果很好。
这就是我所拥有的，

$(function() {
var current_hash = false;
setInterval(function() {
    if(window.location.hash != current_hash) {
        current_hash = window.location.hash;
            if(current_hash=='#home'){
                var month = '9';
                var year ='2011';       
                $.ajax({
                    type: "POST",
                    url: "/home.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });                     
            }
            else if(current_hash=='#edit'){
                $.ajax({
                    type: "POST",
                    url: "/edit.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });             
            }
    }        
}, 100);

然后只需将一些哈希分配给链接 href 属性即可；

                    <li><a href="#home">Home Page</a></li>
                <li><a href="#edit">Edit Page</a></li>

这不是一个完整的重写，只是基本上在同一件事上添加了一些 if 语句，但它可能会帮助某人。