带有 jQ​​uery pushState 和共享页眉/页脚的动态 url

Question

我正在做一个小的网站工作，并尝试使用 jQuery + ajax 来动态加载信息。截至目前，我有一个主页 ~/home 和一个个人资料页面 ~/profile。这两个页面共享相同的页眉和页脚，我首先加载页眉，然后是页面，然后是页脚。当我切换页面时，我只需将页面 div 替换为另一个 html。但是这里的问题是，如果您导航到 ~/profile 并加载它只会加载一个带有页面 div 内容的 html 页面。

基本上，我想知道是否有人对系统有很好的建议，以便能够导航到任何链接并让浏览器知道加载单独的页眉和页脚文件，而无需将所有文件硬编码到每个文件中。我认为它会涉及某种 PHP / 框架，但我使用 CodeIgniter 的唯一一个我非常缺乏经验。

这里的 sn-p 看起来很有希望：CodeIgniter + jQuery(ajax) + HTML5 pushstate: How can I make a clean navigation with real URLs?

if (!$this->input->is_ajax_request())
    $this->load->view('header');

$this->load->view('your_view', $data);

if (!$this->input->is_ajax_request())
    $this->load->view('footer');

我唯一的问题是如何设置一个控制器来拦截我域上的任何链接并加载页眉和页脚，头文件具有链接的 js 文件，该文件知道通过 ajax 将哪个页面加载到中间.

Answer 1

这个问题并不像你想象的那么简单。这不仅仅是关于页眉和页脚，你也有 mime 类型的变化。您必须发送带有 text/html 的 html 消息，以及带有 text/plain 内容类型标头的 ajax 消息。您将需要 2 个皮肤/骨架：一个用于 html，一个用于 ajax 调用。您需要皮肤提供者能够决定在当前情况下使用哪种皮肤。您必须独立于皮肤渲染内容，或者皮肤必须调用内容的渲染方法。

它看起来非常非常粗略：

class Controller
{
    public function __construct()
    {
        $provider = new SkinProvider();
        $this->skin = $provider->getSkin();
    }

    public function action()
    {
        $this->skin->render(new Content());
    }
}

class SkinProvider
{
    public function getSkin()
    {
        if ($this->input->is_ajax_request())
            return new AjaxSkin();
        else
            return new HtmlSkin();
    }
}

class AjaxSkin extends AbstractSkin
{
    public function render($content)
    {
        $this->contentType('text/plain');
        $content->render();
    }
}

class HtmlSkin extends AbstractSkin
{
    public function render($content)
    {
        $this->contentType('text/html');
        $this->load->view('header');
        $content->render();
        $this->load->view('footer');
    }
}

class Content extends AbstractView
{
    public function render()
    {
        $data = $this->model->ask();
        $this->load->view('your_view', $data);
    }
}

您可以将控制器的构造函数放入和抽象控制器中，您将在从该控制器扩展的每个控制器中拥有实际的皮肤。