创建具有多个子文件夹链接的 Ajax 网站失败

我正在尝试创建一个site那是loading全部都是通过 Ajax 的内容。假设该网站是www.abc.net.

I have abc.net/index.html并且无论输入什么 URL（文件夹/文件），该文件都将始终被调用。abc.net/somesubsite被调用时，URL 应保持原样，仅调用 index.html。

现在的想法是查看调用了哪个 URL 并使用 jQuery 处理该 URL 并显示特定的 div。这样，直接链接就很容易成为可能。

好吧，我的问题是我无法让 URL 保持原样，并且当有abc.net/somesubsite/someother然后我收到服务器错误。我正在尝试使用 htaccess，但感觉这并不是一个完美的解决方案。

有好的方法吗？它像是这个网站 http://html5.gingerhost.com/seattle但我希望能够处理在那里不可能的文件夹/子文件夹。我对任何解决方案都感兴趣，如果确实需要的话，加载不同的 html 文件也没有问题。但如果可能的话，我希望将所有内容都放在一个文件中。

像这样更新你的 .htaccess 文件：

RewriteEngine On 
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ index.php?url=$1 [L,QSA]

这会将所有相关的服务器调用重定向到index.php?url=<rest of the url>.

现在，重命名您的index.html to index.php（我们需要编写一些 php 代码）。

在你的 JavaScript 中写：

var url = "<?php echo $_GET['url']; ?>";

现在你就得到了它。您现在可以用“/”分隔符拆分字符串以查找所有需要的组件。

根据您的示例，以下网址：abc.net/somesubsite/someother将重定向到index.php和url变量将保持somesubsite/someother.

然后你可以使用url.split('/')获取数组中的所有“子文件夹”。

您还必须覆盖站点中所有链接的行为：

1. 阻止正常动作
2. 加载ajax内容
3. PushState 更改 url

like so:

$('a').on('click', function(e){ 
    e.preventDefault(); // 1
    var $url = this.href;
    loadContent($url); // 2 
    window.history.pushState("object or string", "Title", $url); // 3        
});