Obtener entradas con ajax

Question

Obtener entradas con ajax

29 abr 2018, 10:11:12

Vistas: 34K

Votos: 4

Quiero obtener entradas con ajax mediante una función de clic.

jQuery

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

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

PHP

function get_ajax_posts() {
    // Argumentos de la consulta
    $args = array(
        'post_type' => array('products'),
        'post_status' => array('publish'),
        'posts_per_page' => 40,
        'nopaging' => true,
        'order' => 'DESC',
        'orderby' => 'date',
        'cat' => 1,
    );

    // La Consulta
    $ajaxposts = new WP_Query( $args );

    // El Bucle
    if ( $ajaxposts->have_posts() ) {
        while ( $ajaxposts->have_posts() ) {
            $ajaxposts->the_post();
                get_template_part('products');
        }
    } else {
        get_template_part('none');
    }
    /* Restaurar los datos originales del Post */
    wp_reset_postdata();
}
add_action('wp_ajax_get_ajax_posts', 'get_ajax_posts');
add_action('wp_ajax_nopriv_get_ajax_posts', 'get_ajax_posts');

Estoy bloqueado aquí.

wpdev

549

ajax

Comentarios

lee esto http://api.jquery.com/jQuery.ajax/. y luego usa .done(... y lee lo que hay en data.

mmm

29 abr 2018 10:25:01

¿Y cuál es la pregunta?? PD. No tienes que hacer wp_reset_postdata() en las callbacks de AJAX, pero sí tienes que usar die ahí.

Krzysiek Dróżdż

29 abr 2018 10:39:25

¿Cómo puedo imprimir template_part? ¿Con echo?

wpdev

29 abr 2018 10:51:37

Todas las respuestas a la pregunta

Comentarios

Además, en caso de que no quieras mezclar los lenguajes PHP y Javascript en los mismos archivos (lo cual no deberías hacer), puedes pasar URLs para solicitudes AJAX mediante wp_localize_script (https://codex.wordpress.org/Function_Reference/wp_localize_script)

Tom

31 ene 2019 14:13:35

en la opción 1 hay un new erróneo en la línea $ajaxposts = new get_posts( $args ); debería decir $ajaxposts = get_posts( $args );

jopfre

28 nov 2019 14:26:05

@jopfre actualizado.

kirillrocks

15 dic 2021 17:28:49

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

Opción 1

La forma simple - retornar todas las publicaciones en formato JSON y recorrerlas en JavaScript

PHP:

function get_ajax_posts() {
    // Argumentos de la consulta
    $args = array(
        'post_type' => array('products'),
        'post_status' => array('publish'),
        'posts_per_page' => 40,
        'nopaging' => true,
        'order' => 'DESC',
        'orderby' => 'date',
        'cat' => 1,
    );

    // La consulta
    $ajaxposts = get_posts( $args ); // cambiado a get_posts desde wp_query, porque `get_posts` retorna un array

    echo json_encode( $ajaxposts );

    exit; // salir de la llamada AJAX (o retornará información inútil en la respuesta)
}

// Disparar acción AJAX para usuarios logueados y no logueados
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", // agregar tipo de dato
    data: { action : 'get_ajax_posts' },
    success: function( response ) {
        $.each( response, function( key, value ) {
            console.log( key, value ); // esos son los datos de las publicaciones.
        } );
    }
});

Opción 2

Obtener contenido HTML e imprimirlo en pantalla.

PHP:

function get_ajax_posts() {
    // Argumentos de la consulta
    $args = array(
        'post_type' => array('products'),
        'post_status' => array('publish'),
        'posts_per_page' => 40,
        'nopaging' => true,
        'order' => 'DESC',
        'orderby' => 'date',
        'cat' => 1,
    );

    // La consulta
    $ajaxposts = new WP_Query( $args );

    $response = '';

    // La consulta
    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; // salir de la llamada AJAX
}

// Disparar acción AJAX para usuarios logueados y no logueados
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", // agregar tipo de dato
        data: { action : 'get_ajax_posts' },
        success: function( response ) {
            console.log( response );

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

En el segundo ejemplo, cambia el selector .posts-area por el que desees para imprimir.

El console.log es solo para que puedas ver la información retornada desde la llamada AJAX en la consola. Deberías eliminarlo una vez que hayas terminado.