javascript - 使用历史 url 更改的 Ajax 内容替换

Question

我制作了一个功能齐全的 Ajax 内容替换脚本。问题是它向地址添加了/about 或/work 或/contact 之类的转发，但是当我重新加载该站点时，找不到该文件。为什么？

有人告诉我问题是我手动添加了文件。这是如何运作的？我不是 Javascript 专家，但我想学习它。

我需要以某种方式添加历史记录(通过历史记录 api？)。我的 .html 文件在数据中。奇怪的是它找到了文件，但是当我尝试手动找到它时，出现 404 错误或者当我使用 F5 刷新站点时。

你能帮我看看它是如何工作的吗？我们可以使用我的代码来查找错误。非常感谢。

更新: Website Link

HTML

<a class="hovers" href="about">About</a>
<a class="hovers" href="projects">Projects</a>
<a class="hovers" href="services">Services</a>
<a class="hovers" href="contact">Contact</a>

Javascript

$(document).ready(function () {
    $('#allcontent').load('data/home.html');
    $('.hovers').click(function () {
        var page = $(this).attr('href');
        $('#allcontent').fadeOut('slow', function () {
            $(this).animate({
                scrollTop: 0
            }, 0);
            $(this).hide().load('data/' + page).fadeIn('normal');
        });
    });
});

$('.hovers').click(function () {
    history.pushState({
        path: this.path
    }, '', this.href)
    $.get(this.href, function (data) {
        $('#allcontent').slideTo(data)
    })
    return false
})

$(window).bind('popstate', function () {
    $('#allcontent').slideTo(location.pathname)
})

Answer 1

I made a fully functional Ajax Content Replacement script. The problem is that it adds forwards like /about or /work or /contact to the adress but when I reload the site, the file cannot be find. Why?

您的代码有效地说明了两件事:

• 从此 URL 加载一些数据并将其添加到页面。
• 告诉浏览器对当前页面的修改使其与其他 URL 上的其他页面相同。

您必须自己在另一个 URL 上创建页面。

除了 404 错误之外，您还没有在您的服务器上做任何事情来告诉它响应 /about(及其 friend )。

您必须自己创建/about。 pushState 不会为你做这件事。