javascript - 我的“在Wordpress中加载更多帖子Ajax按钮”不起作用

我需要点击按钮显示更多帖子

当我单击检查->网络上的按钮时，一切正常，或者至少我猜是好的





我只是不知道为什么我的帖子没有显示在页面上

这是我的密码

主要内容：

  <div id="all-posts" class="posts-container">
        <?php get_template_part('loops/loop','all'); ?>
        <div class="load-more-content">
            <a data-page="2" href="" class="load-more"> More >> </a>
        </div>
    </div>

阿贾克斯（Ajax）：

//For More Content
add_action('wp_ajax_load_more_content', 'load_more_content');
add_action('wp_ajax_nopriv_load_more_content', 'load_more_content');
function load_more_content() {
 $page          = intval( $_POST['page'] );
 $post_per_page = 1;
 $offset        = ( $page - 1 ) * $post_per_page;
 $output_html   = '';

 $load_more_agrs = array(
    'post_type'      => array('post','download'),
    'offset'         => $offset,
    'posts_per_page' => $post_per_page
);

$load_more_query = new WP_Query( $load_more_agrs );

if ( $load_more_query->have_posts() ):
    while ( $load_more_query->have_posts() ):$load_more_query->the_post();
        $output_html .= ' <a class="post-link" href="' . the_permalink() . '">';
        $output_html .= '<div class="post wow fadeInUp">';
        $output_html .= '<div class="post-inner">';
        $output_html .= '<div class="post-thumb">';
        get_the_post_thumbnail( $load_more_query->post->ID, 'main-thumbnail' );
        $output_html .= '</div>';
        $output_html .= '<span class="post-title">' . get_the_title( $load_more_query->post->ID ) . '</span>';
        $output_html .= '</div>';
        $output_html .= '<div class="post-meta" >';
        $output_html .= '<span ><i class="fa fa-clock-o" ></i>' . get_the_date( 'y,m,d', $load_more_query->post->ID ) . '</span>';
        $output_html .= '<span><i class="fa fa-user"></i>' . get_the_author() . '</span>';
        $output_html .= '<span><i class="fa fa-eye"></i>' . get_post_view( get_the_ID() ) . '</span>';
        $output_html .= '<span><i class="fa fa-thumbs-o-up"></i></span>';
        $output_html .= '</div>';
        $output_html .= '</div>';
        $output_html .= '</a>';
    endwhile;
endif;
$count = $load_more_query->found_posts;
wp_reset_postdata();
$result            = array();
$result['count']   = $count;
$result['content'] = $output_html;
die( json_encode( $result ) );

}

我认为我的问题是Ajax Code的
当我添加dataType:'json',时出现错误。我的意思是执行错误函数，因此我必须添加contentType: 'application/json',，但是我的Response Only只有0。

Ajax代码：

 $(document).on('click','.load-more', function (event) {
    event.preventDefault();
    var $this = $(this);
    $this.text('Loading...');
    var $page = parseInt($this.data('page'));
    $.ajax({
        url: data.ajax_url,
        type:'post',
        /*contentType: 'application/json',*/
        //dataType:'json',
        data: {
            action: 'load_more_content',
            page: $page
        },
        success: function (response) {
            if (parseInt(response.count) > 0) {
                $this.parent().before(response.content);
                $this.data('page', parseInt($page + 1));
            }
            $this.text('Done!');
        },
        error: function (err) {
            alert('Error is : '+ err.statusText);
        }
    });
});

}）;

最佳答案

网络标签中显示的响应不是正确的JSON。

该问题是由使用回显其结果的the_permalink（）引起的。您应该使用get_permalink（）返回一个字符串。

另外，尽管与该特定问题无关，但get_the_post_thumbnail（）的结果未附加到$ output_html。

关于javascript - 我的“在Wordpress中加载更多帖子Ajax按钮”不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45006789/