Question

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

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

不知何故，我需要添加历史记录（通过历史API？）。我的.html文件在数据中。奇怪的是它找到了文件，但是当我尝试手动找到它时，我得到404错误或当我用F5刷新网站时。

你能帮帮我，告诉我它是如何运作的。我们可以使用我的代码来查找错误。非常感谢。

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

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

您的代码实际上是在说两件事：

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

您必须自己在其他网址上创建页面。

您的服务器上没有做任何事情要求它以{404}错误以外的任何内容回复/about（及其朋友）。

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

Ajax内容替换与历史URL更改

1 个答案: