如何从URL加载Ajax内容使用了哈希加载、使用了、内容、URL

2023-09-10 18:04:39 作者:酷三岁

我曾尝试寻找许多问题,但他们没有解决我的问题。

I have tried looking for many topics but none of them fixes my problem.

我目前正在开发我的投资组合的网站,但,这是我第一次使用Ajax。我被困在这许多天。

I'm currently developing my portfolio site but this is my first time using Ajax. I stuck on this for many days.

我用从html5.gingerhost.com源$ C ​​$ c和调整PHP的一部分一点点,因为我不习惯PHP。它仅加载页面[标题]成的index.html的标题,并从HTML文件(仅限于HTML元素,没有JS,无CSS)具有相同的名称作为HREF的所有内容。

I used source code from html5.gingerhost.com and tweak the php part a little bit because I'm not used to php. It only loads [title] of the page into index.html's title and get all the content from html file (only html elements, no js, no css) with the same name as 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);
        }); 
}

这是工作正常,当我打后退和前进按钮。

This is working fine when I hit back and forward buttons.

现在的问题是,我试图找到如何从特定URL加载Ajax内容。

The problem is I'm trying to find how to load Ajax content from the specific Url.

例如,

我要直接去 www.mysite.com/about 但是在我的目录下有没有这样的目录名约,所以它会返回未找到页面给我。

I want to go directly to www.mysite.com/about but in my directory there's no such directory name 'about', so it returns 'Not found' page to me.

在 http://html5.gingerhost.com/ 如果我输入的 http://html5.gingerhost.com/seattle 它显示了西雅图页,而不是未找到页面像我的。

In http://html5.gingerhost.com/ if I type http://html5.gingerhost.com/seattle It shows the Seattle page instead of 'Not found' page like mine.

请建议我如何做到这一点还是给技术做这些事情的我的关键字。

Please suggest me how to achieve that or give me the keywords of the technique to do these things.

感谢你在前进,

帕克

推荐答案

请务必重定向到的pushState工作相对路径。 /对,而不是整个URL。

Be sure to redirect to a relative path for pushState to work. /about, and not the whole URL.

那么,您需要在Web服务器上的重定向。在阿帕奇比如你可以设置在.htaccess,这说/约应该去的index.php /约(或其他) - 在那里你将采取的关于从URL和加载你需要什么,并给这个回用户。

Then you will need a redirection on the web server. In apache for example you can set this in .htaccess, that says that /about should go to index.php/about (or whatever) - and there you will take the "about" from the URL and load what you'll need and give this back to the user.

阿帕奇例如重定向的一切,但静态文件和目录的index.php:

Apache example redirection for everything but static files and directories to index.php:

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