AJAX分页,更新当前页面

时间:2018-11-05 作者:level7

我创建了一个数字分页,通过AJAX加载帖子。

这是PHP和jQuery代码:

// PHP Code
function ajax_pagination_enqueue_scripts() {
    wp_enqueue_script( \'ajax-pagination\',  get_stylesheet_directory_uri() . \'/js/ajax-pagination.js\', array( \'jquery\' ), \'1.0\', true );
    wp_localize_script( \'ajax-pagination\', \'ajax_pagination_vars\', array(
        \'ajaxurl\' => admin_url( \'admin-ajax.php\' ),
        \'query_vars\' => json_encode( $wp_query->query )
    ));
}

add_action( \'wp_enqueue_scripts\', \'ajax_pagination_enqueue_scripts\' );

function ajax_pagination_load() {
    $query_vars = json_decode( stripslashes( $_POST[\'query_vars\'] ), true );
    $query_vars[\'paged\'] = $_POST[\'page\'];
    $posts = new WP_Query( $query_vars );
    $GLOBALS[\'wp_query\'] = $posts;
    if( $posts->have_posts() ) :
        while( $posts->have_posts() : $posts->the_post() ) :
            get_template_part( \'content\', get_post_format() );
        endwhile;
    else:
        get_template_part( \'content\', \'none\' );
    endif;
    die();
}

add_action( \'wp_ajax_nopriv_ajax_pagination\', \'ajax_pagination_load\' );
add_action( \'wp_ajax_ajax_pagination\', \'ajax_pagination_load\' );

// jQuery Code
(function($) {
    $(document).on( \'click\', \'.nav-button a\', function( event ) {
        event.preventDefault();
        var page = $(this).data(\'page\');
        $.ajax({
            url: ajax_pagination_vars.ajaxurl,
            type: \'post\',
            data: {
                action: \'ajax_pagination\',
                query_vars: ajax_pagination_vars.query_vars,
                page: page
            },
            success: function( response ) {
                $(\'.main-content\').html(response);
            }
        })
    })
})(jQuery);
代码可以工作,但当我刷新页面时,会从第一页再次加载帖子。

例如:如果我在刷新页面时单击加载第2页的按钮,则会从第1页显示帖子。

是否有一种方法可以在页面刷新后仍保持在同一页面上?

谢谢

2 个回复
最合适的回答,由SO网友:Cristiano Baptista 整理而成

刷新页面时,当前没有状态可用于知道您在第2页上。

您可以使用History API 要更新页面URL而不刷新页面,请执行以下操作:

history.pushState(data, title, \'https://yourpage.com/?page=2\');
还可以使用在用户浏览器上设置某些状态SessionStorage 而不是LocalStorage API, 因为当用户关闭浏览器选项卡时,会话将不会持续:

// Store current page
sessionStorage.setItem(\'page\', 2);

// Get current page on page load/refresh
var currentPage = sessionStorage.getItem(\'page\');
第二种方法有它的问题,因为用户可以转到另一个页面,然后返回分页页面并获取第二页结果,而不是获取第一页结果,因此您需要小心这种方法。

SO网友:Maidul

您可以设置cookie或local storage 设置当前页面,因为在页面重新加载时无法跟踪使用ajax传递的分页变量。更新js代码以检查页面重新加载时的cookie或本地存储,并基于此获得结果。在ajax成功函数中,如下设置localstorage。

// Store current page number
localStorage.setItem(\'page\', 2);
并在页面上重新加载检查本地存储

//Get current page number
var currentPage = localStorage.getItem(\'page\');

结束