Question

我试过寻找很多主题，但没有一个能解决我的问题。

我目前正在开发我的投资组合网站，但这是我第一次使用Ajax。我坚持了很多天。

我使用了来自html5.gingerhost.com的源代码并稍微调整了php部分因为我不熟悉php。它只将页面的[title]加载到index.html的标题中，并从html文件中获取所有内容（只有html元素，没有js，没有css），其名称与href相同。

这是js。

$(document).ready(function(){

    $('.nav a').click(function(e) {

        href = $(this).attr("href");

        loadContent(href);

        // HISTORY.PUSHSTATE
        history.pushState('', 'New URL: '+href, href);
        e.preventDefault();
    });
});

// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
    console.log("pathname: "+location.pathname);
    loadContent(location.pathname);
};


function loadContent(url){
    // USES JQUERY TO LOAD THE CONTENT
    $.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
    // THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
        $.each(json, function(key, value){
            $(key).html(value);
        });
    });

    //  SUBTRACT '/'
    url = url.substr(1);

    if(url == ""){
        url = "home"    
    }

    //  ADD '.html"
    url = url.concat(".html")

    //  REPLACE CONTENT INTO THE DIV
    $.ajax({
        url: url
    })
        .done(function(html) {
            $(".content-box").html(html);
        }); 
}

当我按下后退和前进按钮时，此功能正常。

问题是我正在尝试找到如何从特定的Url加载Ajax内容。

例如，

我想直接转到 www.mysite.com/about 但在我的目录中没有这样的目录名称'about'，所以它会向我返回'Not found'页面。

在http://html5.gingerhost.com/中，如果我输入http://html5.gingerhost.com/seattle它会显示西雅图页面而非“未找到”页面，就像我的一样。

请建议我如何实现这一目标或给我这些技术的关键词来做这些事情。

提前谢谢你，

普克

Answer 1

请务必重定向到pushState工作的相对路径。 / about，而不是整个网址。

然后，您需要在Web服务器上进行重定向。例如，在apache中你可以在.htaccess中设置它，它表示/ about应该转到index.php / about（或者其他） - 然后你将使用＆＃34; about＆＃34;从URL中加载您需要的内容并将其返回给用户。

除了静态文件和目录之外的所有内容的Apache示例重定向到index.php：

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.php?$1 [QSA,L]

如何在不使用哈希的情况下从Url加载Ajax内容

1 个答案: