2

我正在尝试设置 pjax，但它不起作用。每当我单击 pjax 链接时，url 都会更改为domain.com/foo（没有 html 内容更改），然后更改为domain.com/#，然后正常重定向到domain.com/foo. 为什么？

这就是我触发 pjax 的方式： $(document).pjax('a[data-pjax]', '#wrapper');

在我的控制器中，我有这个：

public function getIndex() {
    $posts = $this->loginOptions();

    $this->layout->title = 'My title';      
    $content = View::make('foo.bar')
        ->with('title', $this->layout->title)
        ->with('posts', []);

    if (Request::header('X-PJAX'))
        return $content;
    else 
        $this->layout->content = $content;
}

我的 HTML（我单击链接的第一页）如下所示：

<DOCTYPE html>
<head></head>
<html>
    <body>
    <div id='wrapper'>
        <a data-pjax href='foo'>Foobar</a>
    </div>
    <script src='http://code.jquery.com/jquery-2.0.0.min.js'></script>
    <script src='jquery.pjax.js'></script>
    <script src='script.js'></script>
    </body>
</html>

如果我使用 X-PJAX 标头运行标准 ajax 调用，我会得到正确的 html（这意味着我的 If 正在工作），但 url 没有改变，这就是我想使用 pjax 的原因。

$.ajax({
    url: '/login',
    type: 'get',
    beforeSend: function(xhr){ 
        xhr.setRequestHeader('X-PJAX', true); 
        xhr.setRequestHeader('X-PJAX-Container', '#wrapper') 
    },
    success: function(resp) { $('#wrapper').html(resp); }
})
4

3 回答 3

3

你是如此接近：D

JS：

$(document).pjax('a[data-pjax]', '#wrapper', { fragment: '#wrapper});

更改为 # 并随之重新加载是因为 pjax 可以工作，但找不到 ID 为 #wrapper 的 HTML 元素，因此它会超时并重新加载页面。这种行为是需要的，因为较旧的浏览器（没有 pushstate/popstate/ajax 支持）然后加载所有链接，就像页面是静态的一样。

尝试改变这个：

 if (Request::header('X-PJAX'))
        echo '<div id="wrapper"> pjaxxx </div>';
    else 
        $this->layout->content = $content;

我知道你已经使用 history.js 解决了这个问题，但是 pjax 解决了愚蠢的 hashbanging，并且一旦实现就很容易使用。

希望你还在读这篇文章，干杯！

于 2013-10-22T11:51:07.630 回答
1

我放弃了pjax。我现在改用history.js。

Javascript：

History.Adapter.bind(window,'statechange',function(){
    var State = History.getState();
    $.ajax({
        url: State.url,
        type: 'get',
        beforeSend: function(xhr){ 
            xhr.setRequestHeader('X-PJAX', true); 
        },
        success: function(resp, status, xhr) { 
            document.title = xhr.getResponseHeader('Page-Title');
            $('#wrapper').html(resp); 
        }
    });
});

$(document).on('click', 'a[data-pjax]', function(e){
    e.preventDefault();

    var self = $(this);

    History.pushState(null, 'Loading page...', self.attr('href'));
});

PHP（控制器）：

public function getIndex() {
    $this->layout->title = 'My Title';      
    $content = View::make('my.view')
        ->with('title', $this->layout->title)
        ->with('posts', []);

    if (Request::header('X-PJAX')) {
        return Response::make($content)
            ->header('Page-Title', $this->layout->title);
    } else 
        $this->layout->content = $content;
}
于 2013-10-12T16:25:47.073 回答
0

我刚刚开始使用 Rob Crowe 的 Turbo ......

https://github.com/rcrowe/Turbo

奇迹般有效

（在引擎盖下使用 pjax）

于 2013-10-18T20:54:10.817 回答