Получение записей с помощью ajax

Question

Получение записей с помощью ajax

29 апр. 2018 г., 10:11:12

Просмотры: 34K

Голосов: 4

Я хочу получать записи с помощью ajax по клику на функцию.

jQuery

$(".get-posts").click(function(){

  $.ajax({  
    type: 'POST',  
    url: '<?php echo admin_url('admin-ajax.php');?>',  
    data: { action : 'get_ajax_posts' },  
    success: function(){  
       // ???
    }
  });  
});

PHP

function get_ajax_posts() {
    // Аргументы запроса
    $args = array(
        'post_type' => array('products'),
        'post_status' => array('publish'),
        'posts_per_page' => 40,
        'nopaging' => true,
        'order' => 'DESC',
        'orderby' => 'date',
        'cat' => 1,
    );

    // Запрос
    $ajaxposts = new WP_Query( $args );

    // Цикл
    if ( $ajaxposts->have_posts() ) {
        while ( $ajaxposts->have_posts() ) {
            $ajaxposts->the_post();
                get_template_part('products');
        }
    } else {
        get_template_part('none');
    }
    /* Восстанавливаем оригинальные данные записи */
    wp_reset_postdata();
}
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');

Я застрял на этом месте.

wpdev

549

ajax

Комментарии

прочитайте это http://api.jquery.com/jQuery.ajax/, а затем используйте .done(... и посмотрите, что находится в data.

mmm

29 апр. 2018 г. 10:25:01

И в чем вопрос?? P.S. Вам не нужно делать wp_reset_postdata() в AJAX-коллбэках, но обязательно нужно использовать die там.

Krzysiek Dróżdż

29 апр. 2018 г. 10:39:25

Как я могу вывести template_part? С помощью echo?

wpdev

29 апр. 2018 г. 10:51:37

Все ответы на вопрос

Комментарии

Кроме того, если вы не хотите смешивать языки PHP и JavaScript в одних и тех же файлах (чего делать не следует), вы можете передавать URL-адреса для AJAX-запросов с помощью функции wp_localize_script (https://codex.wordpress.org/Function_Reference/wp_localize_script)

Tom

31 янв. 2019 г. 14:13:35

в варианте 1 есть ошибочное ключевое слово new в строке $ajaxposts = new get_posts( $args ); должно быть $ajaxposts = get_posts( $args );

jopfre

28 нояб. 2019 г. 14:26:05

@jopfre обновлено.

kirillrocks

15 дек. 2021 г. 17:28:49

kirillrocks 598 · Accepted Answer · 2018-04-29T11:58:14Z

Вариант 1

Простой способ - возвращаем все записи в формате JSON и обрабатываем их в JavaScript

PHP:

function get_ajax_posts() {
    // Аргументы запроса
    $args = array(
        'post_type' => array('products'),
        'post_status' => array('publish'),
        'posts_per_page' => 40,
        'nopaging' => true,
        'order' => 'DESC',
        'orderby' => 'date',
        'cat' => 1,
    );

    // Запрос
    $ajaxposts = get_posts( $args ); // используем get_posts вместо wp_query, так как `get_posts` возвращает массив

    echo json_encode( $ajaxposts );

    exit; // завершаем AJAX-вызов (иначе вернется лишняя информация в ответе)
}

// Добавляем AJAX-действие для авторизованных и неавторизованных пользователей
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');

JavaScript:

$.ajax({
    type: 'POST',
    url: '<?php echo admin_url('admin-ajax.php');?>',
    dataType: "json", // указываем тип данных
    data: { action : 'get_ajax_posts' },
    success: function( response ) {
        $.each( response, function( key, value ) {
            console.log( key, value ); // здесь находятся данные записей
        } );
    }
});

Вариант 2

Получаем HTML-контент и выводим его на экран.

PHP:

function get_ajax_posts() {
    // Аргументы запроса
    $args = array(
        'post_type' => array('products'),
        'post_status' => array('publish'),
        'posts_per_page' => 40,
        'nopaging' => true,
        'order' => 'DESC',
        'orderby' => 'date',
        'cat' => 1,
    );

    // Запрос
    $ajaxposts = new WP_Query( $args );

    $response = '';

    // Обработка запроса
    if ( $ajaxposts->have_posts() ) {
        while ( $ajaxposts->have_posts() ) {
            $ajaxposts->the_post();
            $response .= get_template_part('products');
        }
    } else {
        $response .= get_template_part('none');
    }

    echo $response;

    exit; // завершаем AJAX-вызов
}

// Добавляем AJAX-действие для авторизованных и неавторизованных пользователей
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');

JavaScript:

   $.ajax({
        type: 'POST',
        url: '<?php echo admin_url('admin-ajax.php');?>',
        dataType: "html", // указываем тип данных
        data: { action : 'get_ajax_posts' },
        success: function( response ) {
            console.log( response );

            $( '.posts-area' ).html( response ); 
        }
    });

Во втором примере замените селектор .posts-area на тот, в который нужно выводить контент.

console.log добавлен только для того, чтобы вы могли видеть возвращаемую информацию из AJAX-запроса в консоли. Удалите его после завершения работы.