WordPress ajax加载更多无法正常工作?

时间:2020-10-29 23:26:52

标签: javascript php jquery ajax wordpress

我正在尝试通过单击“加载更多”按钮来加载更多帖子,但单击按钮无法正常工作,我的前三篇文章一次又一次重复,有人可以帮助我吗?

这是我放在模板文件中的查询。

$paged=get_query_var('paged') ? get_query_var('paged') : 1;
                        $the_queryx = new WP_Query(array(
                                'post_type' => 'exhibitions',
                                'posts_per_page' => 3,
                                'post_status' => 'publish',
                                'order' => 'DESC',
                                'paged'=>$paged,
                                'post__not_in'=> array($sticky_post_id),
                            )
                        );

                        $the_max_num_pagesx = $the_queryx->max_num_pages;

                        if ($the_queryx->have_posts()) {

                            echo '<div id="post_cat_home" class="row">';
                            while ($the_queryx->have_posts()) {
                                $the_queryx->the_post();

                                get_template_part('loop-templates/content', get_post_format());

                            }
                            echo '</div>';

                            if ($the_max_num_pagesx > 1) {
                                echo '<div class="load-more-posts" style="width:100%; text-align:center;"> 
                <button id="more_posts_home_exb" data-sticky="' . $sticky_post_id . '" data-pages="' . $the_max_num_pagesx . '" data-pn="'.$paged.'" class="btn more_posts"> </button>
                </div>';
                            }

                            /* Restore original Post Data */
                            wp_reset_postdata();

                        } 

这是我的Ajax脚本:

$("#more_posts_home_exb").on("click", function (e) {
        e.preventDefault();// When btn is pressed.
        $(this).attr("disabled", true); // Disable the button, temp.
        var total = $(this).data('pages');
        var sticky = $(this).data('sticky');
        load_posts_home_exb(total, sticky);

    });

    //home exhibitions loading
    function load_posts_home_exb(total, sticky) {

        var pageNumber = 1;
        var ppp = 3; // Post per page

        var str = '&sticky_ignore=' + sticky + '&pageNumber=' + pageNumber + '&total=' + total + '&action=more_post_home_exb_ajax';

        $.ajax({
            type: "POST",
            dataType: "html",
            url: ajax_posts.ajaxurl,
            data: str,
            success: function (data) {

                var $data = $(data);
                pageNumber++;
                if ($data.length) {

                    $("#post_cat_home").append($data);
                    $("#more_posts_home_exb").attr("disabled", false);
                } else {
                    $("#more_posts_home_exb").attr("disabled", true);
                }

            },
            error: function (jqXHR, textStatus, errorThrown) {
                $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }

        });

        return false;
    } 

这是我最终的功能文件代码,该功能文件是通过ajax脚本调用的。

function more_post_home_exb_ajax()
{

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
   // $paged = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
    $sticky_ignore = (isset($_POST['sticky_ignore'])) ? array($_POST['sticky_ignore']) : '';
    $paged = $_POST['pageNumber'] +1;

    header("Content-Type: text/html");

    $loop_template = 'loop-templates/content';

        $args = array(
//            'suppress_filters' => true,
            'post_type' => 'exhibitions',
            'posts_per_page' => $ppp,
            'post__not_in' => $sticky_ignore,
            'order' => 'DESC',
            'post_status' => 'publish',
            'paged' => $paged,
        );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop->have_posts()) :
        while ($loop->have_posts()) : $loop->the_post();

            get_template_part($loop_template, get_post_format());

        endwhile;
    endif;
    exit;
}

add_action('wp_ajax_nopriv_more_post_home_exb_ajax', 'more_post_home_exb_ajax');
add_action('wp_ajax_more_post_home_exb_ajax', 'more_post_home_exb_ajax');

此代码有效,但是单击按钮时,前三篇文章会重复。谢谢!

1 个答案:

答案 0 :(得分:0)

我已经在ajax脚本中尝试了某些条件,并且现在可以正常工作。 ;)

//home exhibitions loading
    function load_posts_home_exb(total, sticky) {

        var pageNumber = 0;
        var ppp = 3; // Post per page

        pc_x++;
        pageNumber = pc_x;

        if (total > pageNumber - 1) {

            var str = '&sticky_ignore=' + sticky + '&pageNumber=' + pageNumber + '&total=' + total + '&action=more_post_home_exb_ajax';

            $.ajax({
                type: "POST",
                dataType: "html",
                url: ajax_posts.ajaxurl,
                data: str,
                success: function (data) {

                    var $data = $(data);
                    
                    if ($data.length) {

                        $("#post_cat_home").append($data);
                        $("#more_posts_home_exb").attr("disabled", false);
                    } else {
                        $("#more_posts_home_exb").attr("disabled", true);
                    }

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
                }

            });

        }
        else{
            $("#more_posts_home_exb").hide();
        }
        return false;
    }