Wordpress AJAX 加载页面内容答案

【问题标题】：Wordpress AJAX load page contentWordpress AJAX 加载页面内容
【发布时间】：2017-04-11 20:16:09
【问题描述】：

我试图让 wordpress 通过 AJAX 加载我的其他页面，首先我认为我不会附加其他页面 HTML，但似乎页面不知道如何找到页面 ID。

我的 jQuery 文件 ajax-pagination.js

(function($) {
function find_page_number( element ) {
    element.find('span').remove();
    return parseInt( element.html() );
}
$(document).on( 'click', '.menu-item a', function( event ) {
    event.preventDefault();

    page = find_page_number( $(this).clone() );
    $.ajax({
        url: ajaxpagination.ajaxurl,
        type: 'post',
        data: {
            // action: 'ajax_pagination',
            action: 'my_ajax_pagination',
            query_vars: ajaxpagination.query_vars,
            page: page
        },
    beforeSend: function() {
        $('#main').find( 'article' ).remove();
    $('#nav-burgermenu-btn').removeClass('active');
    $('#nav').removeClass('active');
        $(document).scrollTop();
        $('#main').append( '<div class="page-content" id="loader">Loading New Posts...</div>' );
    },
    success: function( html ) {
        $('#main #loader').remove();
        $('#main').append( html );
    }
    })
})
})(jQuery);

我的 Wordpress 函数 PHP 文件

一切都是这样加载的：

global $wp_query;
wp_localize_script( 'ajax-pagination', 'ajaxpagination', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'query_vars' => json_encode( $wp_query->query )
));

然后这段代码如下：

add_action( 'wp_ajax_nopriv_ajax_pagination', 'my_ajax_pagination' );
add_action( 'wp_ajax_ajax_pagination', 'my_ajax_pagination' );

function my_ajax_pagination() {
    $query_vars = json_decode( stripslashes( $_POST['query_vars'] ), true );

    $query_vars['paged'] = $_POST['page'];


    $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() );
        }
    }
    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 );
}

现在，当单击我的导航中的链接时，它会在 HTML 中附加一个 0。就像 find_page_number 函数出现问题一样，因为 $('#main').append( html );不会附加 html.. 但我不确定。

【问题讨论】：

我认为 my_ajax_pagination 应该返回一些 DOM，但我没有看到任何代码这样做？

标签： javascript php jquery ajax wordpress

【解决方案1】：

问题出在这部分：

 else {
    while ( $posts->have_posts() ) {
        $posts->the_post();
        get_template_part( 'content', get_post_format() );
    }

我用 'page' 替换了 get_post_format() 并且它起作用了。

else {
    while ( $posts->have_posts() ) {
        $posts->the_post();
        get_template_part( 'content', 'page' );
    }

还要确保“内容”实际上是“内容”，而不是“模板部分/页面/内容”之类的其他内容。

（原代码来自https://premium.wpmudev.org/blog/load-posts-ajax/）

【讨论】：