¿Cómo enviar una petición ajax y obtener una respuesta de una función?

Question

¿Cómo enviar una petición ajax y obtener una respuesta de una función?

1 jun 2016, 03:34:58

Vistas: 23.5K

Votos: 3

He creado una función dentro de un plugin. Me gustaría llamarla con una función jQuery ajax.

La función está definida de la siguiente manera:

add_action( 'wp_ajax_my_test_ajax', 'my_test_ajax' );
add_action( 'wp_ajax_nopriv_my_test_ajax', 'my_test_ajax' );

function  my_test_ajax() {    

    $resp = array('title' => 'aquí está el título', 'content' => 'aquí está el contenido') ;        
    wp_send_json($resp) ;

}

Luego intento llamar a la función desde JavaScript:

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php' ;
var data = {
    action: ' my_test_ajax'
} ;
var req = jQuery.post( target , data,  function(resp) { 
    console.log(resp.responseText);
}) ;    
}

El sitio responde desde admin-ajax.php. La respuesta lleva un encabezado '200 OK'. El cuerpo de la respuesta es '0'.

El codex me indica que puedo esperar esta respuesta si el valor de 'action' en el cuerpo del post no coincide con el nombre de una función conectada a los hooks ajax de WordPress. Pero hasta donde puedo ver, estoy bien en eso.

Estoy seguro de que la función está incluida en mi archivo de plugin.

¿Cuáles son los otros requisitos básicos esenciales para que esto funcione?

(No quiero preocuparme por nonces o localización de js en este momento. Solo quiero obtener una respuesta de la función antes de construir más)

dave dave

175

ajax

Todas las respuestas a la pregunta

Ismail 1.97K · Answer 1 · 2016-06-01T04:27:57Z

$.ajax es muy sencillo y puedes añadir más parámetros fácilmente en la línea data: {action:'my_test_ajax'}, prueba esto:

var target = 'http://'  +  window.location.hostname  + '/wp-admin/admin-ajax.php';
$.ajax({
    url: ajax,
    data: {action:'my_test_ajax'},
    type: 'post',
    success: function(data){
        console.log(data, data.title, data.content)
    }
});

Asegúrate de que target apunte exactamente a admin-ajax.php o define una variable global (o usando localize script) para almacenar la ruta a admin-ajax.php que es admin_url('admin-ajax.php') en caso de confusión.

$.ajax por defecto analiza los datos JSON, si trabajas con otros métodos que devuelven la respuesta tal cual (como string) entonces simplemente usa el método JSON.parse(response). Esto es porque usas wp_send_json($resp) que devuelve una respuesta de objeto JSON en el endpoint.

Aquí un ejemplo de cómo añadir más datos a la solicitud:

Usando el método append en la variable data o manteniéndolo corto y simple como data: {action:'my_test_ajax', name: 'dave', network: 'wpse'} y desde la función my_test_ajax puedes obtener estos datos con $_REQUEST[tag] por ejemplo $_REQUEST['name']

$.get (método $_GET):

Este es aún más simple y requiere menos código:

$.get( target = '/wp-admin/admin-ajax.php?action=my_test_ajax', function( data ) {
    console.log( data )
});

Recuerda usar $_REQUEST en tu script PHP porque combina todos los conjuntos de datos $_GET, $_POST y $_COOKIE. A menos que estés seguro del método con el que estás trabajando.

Espero que esto ayude.

T.Todua 5.85K · Answer 2 · 2016-10-04T23:07:20Z

1) tienes un espacio extra en el código, y por eso no funciona:

action: ' my_test_ajax'
         ^

2) además, ¡debes incluir check_admin_referrer() !!!!!!!!!

function  my_test_ajax() {  
   check_admin_referrer();
    .........
    .........
}

T.Todua

5.85K

4 oct 2016 23:07:20