我创建了一个数字分页,通过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页显示帖子。
是否有一种方法可以在页面刷新后仍保持在同一页面上?
谢谢
最合适的回答,由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\');
第二种方法有它的问题,因为用户可以转到另一个页面,然后返回分页页面并获取第二页结果,而不是获取第一页结果,因此您需要小心这种方法。