Llamada básica de Wordpress AJAX

2

Tengo una nueva instalación de WP y para mantener las cosas simples, actualmente solo tengo una acción simple como sigue en mi functions.php :

function getFruits() {
    return json_encode( ['fruits' => ['apples', 'pears']]);
} 

function my_enqueue() {    
    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );

    wp_localize_script( 'ajax-script', 'my_ajax_object',
        array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

Ahora, mi objetivo es usar JQuery / JavaScript para realizar una llamada AJAX a mi terminal de wordpress y recuperar el objeto json de frutas e imprimirlo en la consola simplemente al renderizar la página de destino.

Esto es lo que intenté:

twentyseventeen\js\my-ajax-script.js :

$(document).ready(function() {
    $.ajax(
        {
            type: "get",
            data : {
                action: 'getFruits'
            },
            dataType: "json",
            url: my_ajax_object.ajax_url,
            success: function(msg){
                console.log(msg); //output fruits to console
            }
        });
});

Actualmente, obtengo un error de JQuery no definido, aunque parece estar en cola. En segundo lugar, no estoy seguro de estar implementando esto correctamente, ya que nunca he usado WP AJAX antes. Así que ahora mismo, mi objetivo es conseguir que funcione un ejemplo básico. Agradezco cualquier sugerencia sobre cómo lograr esto.

Gracias

    
pregunta AnchovyLegend 18.08.2017 - 18:16

2 respuestas

4

WordPress AJAX usa acciones para conectar su jQuery action con una acción tradicional de WordPress. Eche un vistazo a ejemplo que WordPress proporciona en sus documentos . Hay 2 ganchos:

add_action( "wp_ajax_{$jquery_action_string}", "callback_function_name" );

Lo anterior solo funcionará para usuarios autenticados (registrados). Para los usuarios que no han iniciado sesión usamos nopriv :

add_action( "wp_ajax_nopriv_{$jquery_action_string}", "callback_function_name" );

Entonces, en nuestro caso, usaríamos ambos:

function return_fruits() {
    echo json_encode( ['fruits' => ['apples', 'pears']]);
    exit();
}
add_action( 'wp_ajax_getFruits', 'return_fruits' );
add_action( 'wp_ajax_nopriv_getFruits', 'return_fruits' );

Tenga en cuenta que cambié el nombre de su función de devolución de llamada para identificar que la acción ajax y el nombre de devolución de llamada no necesitan ser idénticos. También tenga en cuenta que le gustaría hacer eco de estos datos en lugar de devolverlos.

    
respondido por el Howdy_McGee 18.08.2017 - 18:43
0

Tienes que usar el gancho de acción ajax para realizar tu acción jquery.

para el usuario de inicio de sesión:

add_action('wp_ajax_getFruits', 'getFruits);

para el usuario que no ha iniciado sesión:

add_action('wp_ajax_nopriv_getFruits', 'getFruits');

function get_fruits(){
$response = array('Fruits'=> ['banana', 'apple']);
//use this function and make a response then send the response
wp_send_json_success(array('response'=>$response));
// by using wp_send_json_success() you don't need to exit and parse response
}
    
respondido por el Jitender Singh 18.08.2017 - 20:28

Lea otras preguntas en las etiquetas