《二十五个孩子》主题中的AJAX数字分页问题

时间:2019-11-23 作者:Zahid Hossain

我想创建一个AJAX数字分页。并在网站中找到代码。And it works perfectly at first click event, but on the second click it doesn\'t. 如果我在第4页中单击分页,它会工作得很好(And doesn\'t load page, because of ajax)

实例com/page/4/

但是在第一次单击之后,如果我单击分页上的第5页链接,the whole page loads (not as expected in ajax) will go to a blank page url为:

实例com/wp-admin/admin-ajax。php/page/3/

php代码TwentyFifteen Child theme\'s函数。php

if ( !function_exists( \'custom_style_script_enqueue\' ) ) :

    function custom_style_script_enqueue() {
        global $wp_query;

        wp_enqueue_style( \'custom-stylesheet\', get_theme_file_uri( \'css/custom-style.css\' ), array( \'\' ), filemtime( get_theme_file_path( \'css/custom-style.css\' ) ), \'all\' );
        if ( ! wp_script_is( \'jquery\', \'enqueued\' ) ) {
            wp_enqueue_script( \'jquery\' );
        }
        wp_register_script( \'custom-ajax-jscript\', get_theme_file_uri( \'js/custom-ajax-jscript.js\' ), array( \'jquery\' ), filemtime( get_theme_file_path( \'js/custom-ajax-jscript.js\' ) ), false );
        wp_localize_script( \'custom-ajax-jscript\', \'ajaxpaginationobject\', array(
            \'ajax_url\' => admin_url( \'admin-ajax.php\' ),
            \'query_vars\' => json_encode( $wp_query->query )
        ) );
        wp_enqueue_script( \'custom-ajax-jscript\' );
    }
    add_action( \'wp_enqueue_scripts\', \'custom_style_script_enqueue\' );

endif;


if ( !function_exists( \'my_ajax_custom_pagination\' ) ) :

    function my_ajax_custom_pagination() {
        $query_vars = json_decode( stripslashes( $_POST[\'query_vars\'] ), true );
        $query_vars[\'post_type\'] = \'post\';
        $query_vars[\'paged\'] = $_POST[\'page\'];
        $query_vars[\'post_status\'] = \'publish\';
        $query_vars[\'posts_per_page\'] = 3;

        $posts = new WP_Query( $query_vars );
        $GLOBALS[\'wp_query\'] = $posts;

        add_filter( \'editor_max_image_size\', \'my_image_size_override\' );

        if ( ! $posts->have_posts() ) {
            get_template_part( \'content\', \'none\' );
        } else {
            while( $posts->have_posts() ) {
                $posts->the_post();
                get_template_part( \'content\', get_post_format() );
            }
        }
        wp_reset_postdata();
        remove_filter( \'editor_max_image_size\', \'my_image_size_override\' );

        the_posts_pagination( array(
            \'prev_text\' => __( \'Previous page\', \'twentyfifteen\' ),
            \'next_text\' => __( \'Next page\', \'twentyfifteen\' ),
            \'before_page_number\' => \'<span class="meta-nav screen-reader-text">\' . __( \'Page\', \'twentyfifteen\' ) . \'</span>\',
        ) );

        die();

        function my_image_size_override() {
            return array( 825, 510 );
        }
    }

    add_action( \'wp_ajax_ajax_paginaton\', \'my_ajax_custom_pagination\' );
    add_action( \'wp_ajax_nopriv_ajax_paginaton\', \'my_ajax_custom_pagination\' );

endif;
和JS文件自定义ajax jscript。js公司

jQuery(document).ready(function($){
    function find_page_number( element ) {
        element.find(\'span\').remove();
        return parseInt( element.html() );
    }

    // $( ".nav-links a" ).click( function(e) {
    // $(document).on( \'click\', \'.nav-links a\', function(e) {
    $( "nav.navigation" ).on( "click", ".nav-links a", function(e) {
        e.preventDefault();

        page = find_page_number( $(this).clone() );

        $.ajax({
            url: ajaxpaginationobject.ajax_url,
            // type: \'POST\', // I\'ll use \'method\' instead of \'type\' because my jquery version is NOT PRIOR then 1.9.0
            method: \'POST\',
            data: {
                action: \'ajax_paginaton\',
                query_vars: ajaxpaginationobject.query_vars,
                page: page
            },
            beforeSend: function() {
                $(\'#main\').find( \'article\' ).remove();
                $(\'#main nav\').remove();
                $(document).scrollTop();
                $(\'#main\').append( \'<div class="page-content" id="loader">Loading New Posts...</div>\' );
            },
            success: function( html ) {
                $(\'#main #loader\').remove();
                $(\'#main\').append( html );
            }
        });
    });
});
为什么第二次单击不起作用并包含一些额外的部分(/wp-admin/admin-ajax.php/) 在页面链接的中间?

请帮我解决这个问题。

1 个回复
SO网友:Viktor Borítás

您是否已向js控制台检查过ajax是否返回了预期的数据[\'html\']?

在第二次页面单击尝试后显示的url/admin-ajax.php/ 在里面。这不应该发生。这是一个很好的指标,表明ajax传输或返回的输出/查询在某种程度上被破坏了。

如果您还显示相关的html部分,则会很有用。没有它,我们无法检查page = find_page_number( $(this).clone() ); 是一种适当的最佳实践功能。

在我看来$GLOBALS[\'wp_query\'] = $posts; 也可能是有问题的部分。为什么需要直接修改全局变量?据我所知,这不是常见/最佳做法。

I recommend this well detailed explanation on WP Query types 以及对WP查询系统不熟悉的所有人的正确使用。

(附言:几个月前你解决过这个问题吗?如果你解决了这个问题,也许回答你自己的问题或更新对其他人有用。干杯)