2

Делаю бесконечный скрол, но не нашел ничего на pure js. Проблема возникает при отправке запроса к admin-ajax.php

HTML

<button

    class="button button--load-more"
    data-page="1"
    data-url="<?php echo admin_url('admin-ajax.php'); ?>">

    Показать еще

</button>

functions.php

if (wp_doing_ajax()) {

    add_action('wp_ajax_nopriv_dt_load_more', 'dt_load_more_callback');
    add_action('wp_ajax_dt_load_more', 'dt_load_more_callback');

}

function dt_load_more_callback() {
    $paged = $_POST['page'] + 1;
    $query = new WP_Query( array(
        'post_type' => 'post',
        'paged' => $paged, 
    ));

if ($query->have_posts()) :

    while ($query->have_posts()) : $query->the_post();

    get_template_part( 'content', get_post_format() );

    endwhile;

endif;

wp_reset_postdata();

die();}

Js

function init() {
    const loadButton = document.querySelector('.button--load-more');
    const placeToAppend = document.querySelector('.feed__main');

    function request() {
        const currentPage = this.dataset.page;
        const ajaxUrl = this.dataset.url;

        fetch(ajaxUrl, {
            method: 'POST',
            body: JSON.stringify({
                page: currentPage,
                action: 'dt_load_more',
            }),
        }).then(res => res.json())// пост => контейнер
    }
    loadButton.addEventListener('click', request);
}

if (document.readyState === 'complete' || document.readyState === 'loaded'){
    init();
} else {
    document.addEventListener('DOMContentLoaded', init);
}

Headers

Request URL:http://localhost/wordpress/wp-admin/admin-ajax.php
Request Method:POST
Status Code:200 OK
Content-Type:text/html; charset=UTF-8

1 ответ 1

2

Тут дело такое. WordPress не отвечает, потому что хочет видеть запрос не в json, а в значениях $_REQUEST[]. Строки 27-29 в /wp-admin/admin-ajax.php:

// Require an action parameter
if ( empty( $_REQUEST['action'] ) )
    die( '0' );

В связи с этим пришлось изменить вашу функцию request:

function request() {
    const currentPage = this.dataset.page;
    const ajaxUrl = this.dataset.url;

    fetch(ajaxUrl, {
        method: 'POST',
//            headers: {
//                'Accept': 'application/json',
//                'Content-Type': 'application/json'
//            },
//            body: JSON.stringify({
//                page: currentPage,
//                action: 'dt_load_more',
//            }),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
        },
        body: 'action=dt_load_more&page='+currentPage,
    })
        .then((res) => res.json()
        )
        .then(function(res) {
            console.log(res.data);
            document.querySelector('#content').innerHTML += res.data;
        })
        .catch(function(error) {
            console.log(error);
        })
}

Я передаю body как строку. Кроме того, добавлены headers. Закомментированный вариант не работает.

Обратите внимание на два .then. Они выполняются последовательно. В одном .then код не работает.

В functions.php я добавил такой код:

if (wp_doing_ajax()) {

    add_action('wp_ajax_nopriv_dt_load_more', 'dt_load_more_callback');
    add_action('wp_ajax_dt_load_more', 'dt_load_more_callback');

}

function dt_load_more_callback() {
    ob_start();
    $paged = $_POST['page'] + 1;
    $query = new WP_Query( array(
        'post_type' => 'post',
        'paged' => $paged,
    ));

    if ($query->have_posts()) :

        while ($query->have_posts()) : $query->the_post();

//          get_template_part( 'content', get_post_format() );
            get_template_part( 'template-parts/post/content', get_post_format() );


        endwhile;

    endif;

    wp_reset_postdata();

    $content = ob_get_clean();

    wp_send_json_success( $content );
}

Здесь я оборачиваю вывод в ob_start() - ob_get_clean(), чтобы получить все в строке, и завершаю выполнение посредством wp_json_success(), который пакует ответ в json вида {"success":true,"data":"......."} и вызывает die().

Корректировка get_template_part носит технический характер и связана с установленной на тестовом сайте темой.

Еще в js я поставил data-page="0", поскольку сначала тестовая страница у меня пустая.

Все работает. Результат можно посмотреть здесь.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.