Question

我正在使用AJAX在此页面上动态加载人才内容：www.icon.pha-group.com，它使用分页浏览内容。我的问题是，在Google Chrome浏览器中无法记住您所在的分页页面。因此，如果我在内容的第2页上，单击一个项目，然后返回，它又返回到第1页。是否可以通过某种方式修改此代码来解决问题？这是AJAX函数：

        function get_posts($params) {

        $container = $('#container-async');
        $content   = $container.find('.content-ajax');
        $status    = $container.find('.status');

        $status.text('Fetching talent...');

        $.ajax({
                    //url: bobz.ajax_url,
                    url: "/wp-admin/admin-ajax.php",
                    data: {
                        action: 'do_filter_posts',
                    nonce: bobz.nonce,
                    params: $params
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function(data, textStatus, XMLHttpRequest) {

                        if (data.status === 200) {
                            $content.html(data.content);
                        }
                        else if (data.status === 201) {
                            $content.html(data.message);    
                        }
                        else {
                            $status.html(data.message);
                        }

                        //all done so call cycle script
                        script_cycle();

                        // window.location.hash = $this.closest('span').find('.current');
                        // console.log(window.location.hash);
                        //angular.bootstrap(document, ['lightbox']);



                 },
                 error: function(MLHttpRequest, textStatus, errorThrown) {

                $status.html(textStatus);

                /*console.log(MLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);*/
                 },
            complete: function(data, textStatus) {

                msg = textStatus;

                if (textStatus === 'success') {
                    msg = data.responseJSON.found;
                }

                // $status.text('Posts found: ' + msg);
                $status.text('');

                /*console.log(data);
                console.log(textStatus);*/
            }
        });
    }

代码更新，以下是分页：

function vb_ajax_pager( $query = null, $paged = 1 ) {

if (!$query)
    return;

$paginate = paginate_links([
    'base'      => '%_%',
    'type'      => 'array',
    'total'     => $query->max_num_pages,
    'format'    => '#page=%#%',
    'current'   => max( 1, $paged ),
    'prev_text' => 'Prev',
    'next_text' => 'Next'
]);

if ($query->max_num_pages > 1) : ?>
    <ul class="pagination">
        <?php foreach ( $paginate as $page ) :?>
            <li><?php echo $page; ?></li>
        <?php endforeach; ?>
    </ul>
<?php endif;

}

Answer 1

那是因为您单击项目后不更改URL。

$('.youritemclicked').click(function() {
   location.hash($(this).attr('id'));
});

或者您可以简单地将商品包装在anchor标记中：

<a href="#item2">
<!-- Your item body -->
</a>

重要

请确保您没有通过点击此项设置preventDefault()

然后您就可以在浏览器中前进和后退，因为现在您还保存了该项目的历史记录。

更新

if ($query->max_num_pages > 1) : ?>
    <ul class="pagination">
        <?php foreach ( $paginate as $page ) :?>
            <li><a href="#<?php echo $page->ID; ?>"><?php echo $page; ?></a></li>
        <?php endforeach; ?>
    </ul>
<?php endif;

Answer 2

您可以在javascript本地存储变量中存储/获取所需的信息。这样，您就可以记住您所在的分页页面。

后退按钮无法调出Chrome中的AJAX内容位置

2 个答案: