La semana pasada les presenté la magia de AJAX y les mostré cómo usar algunos complementos para «AJAXificar» fácilmente su sitio de WordPress. Por «AJAXify» me refiero a usar AJAX para cambiar la página, ya cargada en el navegador, sin actualizar la página. No puede hacer eso usando PHP puro, el lenguaje que usa WordPress para convertir una plantilla en una vista de página, ya que PHP se ejecuta en su servidor, no en el navegador.
Dado que AJAX se ejecuta con la biblioteca de JavaScript jQuery, que se ejecuta en el navegador, se puede usar para realizar una solicitud de datos por separado del servidor. Una vez que se completa esa solicitud, esos datos se pueden usar en la página actual con jQuery simple.
Hoy les mostraré algunos patrones básicos para usar AJAX para obtener nuevos datos y usarlos en una página que ya está cargada. Cubriré cómo funciona la solicitud y cómo insertar la respuesta en la página usando jQuery. Además, le mostraré cómo conectar la solicitud AJAX a un enlace de WordPress, para que pueda controlar qué datos se devuelven usando PHP. Lo más importante es que hablaremos sobre cómo hacerlo de forma segura.
Antes de comenzar, debo decir que este no es un tema para principiantes. No es demasiado difícil, pero debe tener una idea básica de qué es AJAX, que expliqué la semana pasada, cómo funcionan los ganchos en WordPress, sobre lo que escribí hace unas semanas y un conocimiento básico de jQuery.
Antes de profundizar en los detalles de cómo funciona todo esto, comencemos por tocar brevemente cada uno de los pasos en el proceso de realizar una solicitud AJAX y obtener los datos en el navegador. Abordaré cada uno de estos pasos en profundidad, pero es útil tener una visión general del proceso antes de entrar en detalle en las partes individuales.
Cuando realiza una solicitud, generalmente se desencadena por un evento de JavaScript, por ejemplo, cuando se hace clic en un enlace específico. Eso significa que necesitaremos agregar un archivo JavaScript a nuestro tema para que podamos escribir el jQuery tanto para realizar las solicitudes AJAX como para colocar la respuesta de la solicitud en la página.
Una vez que se realiza la solicitud, el navegador necesita saber dónde está el archivo en WordPress que puede usar para procesar la solicitud. Eso significa que necesitaremos que la URL de ese archivo esté disponible. También queremos asegurarnos de que la acción no pueda ser desencadenada por un tercero, por lo que también tendremos que agregar un nonce .
Una vez que se activa la solicitud, WordPress intentará realizar una acción, por lo que necesitaremos conectar una función de devolución de llamada a esa acción. También tendremos que escribir esa devolución de llamada. Una vez que se procesa la función de devolución de llamada, enviará datos al navegador, que llamamos la respuesta. Tendremos que escribir un poco de jQuery para hacer algo con esos datos, por ejemplo, mostrarlos en la página actual.
Sé que parece mucho, pero podemos dividirlo en 3 pasos.
Preparándose para usar jQuery
El primer paso es agregar nuestro archivo JavaScript y asegurarnos de que tenga todo lo que necesita. Lo que necesita es tener jQuery disponible, la URL para el procesador AJAX de WordPress y un nonce para usar por seguridad. Podemos hacer todo eso dentro de una función enganchada a wp_enqueue_scripts().
En nuestra función de devolución de llamada necesitaremos hacer 2 cosas. El primero es poner en cola nuestro archivo JavaScript. El segundo es usar wp_localize_script para agregar nuestro nonce y la URL de AJAX.
|
01
02
03
04
05
06
07
08
09
10
11
|
add_action( 'wp_enqueue_scripts', 'slug_ajax_scripts' );function slug_ajax_scripts() { if ( ! is_admin() ) { wp_enqueue_script( 'slug-ajax', get_stylesheet_directory_uri() . 'js/slug-ajax.min.js', array ( 'jquery' ), false, true ); $jp = array( 'nonce' => wp_create_nonce( 'nonce' ), 'ajaxURL' => admin_url( 'admin-ajax.php' ), ); wp_localize_script( 'slug-ajax', 'jp', $jp ); }} |
Gracias a lo que hemos hecho con wp_localize_script(), cada vez que se cargue nuestro JavaScript, un objeto estará disponible para todos los JavaScript. En este caso se llama «jp» ya que ese es el segundo argumento que le pasamos a wp_localize_script(). Su contenido es de la matriz de PHP en el tercer argumento. Eso significa que en nuestro JavaScript podremos usar ‘jp.nonce’ y ‘jp.ajaxURL’.
También deberá asegurarse de crear ese archivo en su tema o tema secundario . En el nuevo archivo JavaScript, por ahora, simplemente agregue un contenedor sin conflictos:
|
01
02
03
|
jQuery(document).ready(function($) {}); |
Esto permitirá que todo lo que contiene use $ como un alias para jQuery y se ejecute cuando se cargue la página.
Creación de una solicitud Ajax
Por ahora, construyamos una solicitud AJAX simple que se ejecutará cada vez que se haga clic en un enlace con el ID «ajax-trigger» y devolverá el título de una publicación específica a un contenedor con el ID de «ajax-target». Más adelante te mostraré cómo pasar variables con la solicitud para que podamos hacerla más dinámica, pero empecemos de manera simple.
Antes de comenzar, asegúrese de que la página que tiene tenga el enlace de activación y un contenedor vacío para cargar los resultados. Eso significa que este HTML debe estar presente:
|
01
02
|
<a href="#" id="ajax-trigger">trigger</a><div id="ajax-target"></div> |
Ahora, en su archivo JavaScript, escribamos una solicitud AJAX básica:
|
01
02
03
04
05
06
07
08
09
10
|
$.get( jp.ajaxURL, { 'action': 'jp_ajax_test', 'nonce' : jp.nonce, }, function( response ) { $( '#ajax-target' ).append( response ); } );} |
Esta solicitud, en este momento, enviará dos cosas a la URL definida en jp.ajaxURL, que es la URL del procesador AJAX de WordPress, que configuramos en el último paso. La primera es la acción de WordPress para activar, “jp_ajax_test” y la segunda es el nonce almacenado en jp.nonce, que es el nonce que configuramos en el último paso.
La segunda mitad es la función de devolución de llamada que funciona con la respuesta. Dentro de él, simplemente tomamos la respuesta y usamos el método de adición de jQuery para agregarlo al contenedor «#ajax-target».
Es posible que ya haya notado que este código debe adjuntarse a un evento, que es el siguiente paso, por lo que en realidad nunca se ejecutará. Podemos usar el método click() de jQuery para configurarlo fácilmente para que se ejecute cuando se hace clic en «#ajax-trigger». Así que pongamos nuestro código dentro de eso. Mientras lo agregamos, agreguemos un archivo console.log() antes de AJAX para asegurarnos de que el evento de clic funcione correctamente, ya que aún no hemos configurado la respuesta.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
$( "#ajax-trigger" ).click(function() { console.log( 'clicked!' ); $.get( jp.ajaxURL, { 'action': 'jp_ajax_test', 'nonce' : jp.nonce, }, function( response ) { $( '#ajax-target' ).append( response ); } ); }}); |
Ahora, si hace clic en «#ajax-trigger», debería ver ‘clic’ en su consola. Dependiendo de la configuración de su servidor, verá un «0» o nada en el contenedor de destino, ya que en este momento AJAX no está devolviendo nada.
El lado del servidor
Hasta ahora hemos trabajado totalmente del lado del cliente, IE en el navegador. Para tener algo que cargar, necesitaremos devolver algunos datos. Para eso, necesitamos conectar una función a la acción desencadenada por la solicitud AJAX.
En nuestro archivo JavaScript, configuramos la acción en «jp_ajax_test». Como resultado, cada vez que se ejecute, activará uno de los dos ganchos en WordPress: «wp_ajax_jp_ajax_test» y «wp_ajax_nopriv_jp_ajax_test». El primero solo se ejecutará cuando lo active un usuario que haya iniciado sesión, mientras que el segundo solo se ejecutará cuando un usuario que no haya iniciado sesión active la acción. Esto nos permite enviar diferentes respuestas en función de si el usuario está logueado o no, o no enviar nada en un caso u otro. Por ahora, conectemos la misma devolución de llamada a ambos.
En el functions.php de su tema o tema secundario, creemos los ganchos y una devolución de llamada vacía:
|
01
02
03
04
05
|
add_action( 'wp_ajax_jp_ajax_test', 'slug_ajax_callback' );add_action( 'wp_ajax_no_ppriv_jp_ajax_test', 'slug_ajax_callback' );function slug_ajax_callback() {} |
Ahora tenemos algo que hacer para WordPress cuando recupera esta solicitud. Las funciones de devolución de llamada de AJAX son un poco diferentes a la mayoría de las funciones, porque los datos no se pasan directamente a la función. En su lugar, debemos obtenerlo de la solicitud HTTP. La otra cosa que es diferente es que necesitamos decirle a PHP cuándo «morir»: para detener la ejecución y devolver los datos.
Sin embargo, lo primero que debemos hacer es verificar nuestro nonce. Para esto podemos usar la función check_ajax_referer(). Referrer está mal escrito intencionalmente por cierto. Es una larga historia, sólo confía en mí. Esto verificará que nuestro nonce es correcto. Acepta dos parámetros, el nombre del nonce y la parte de la solicitud en la que se encuentra. Así es como se ve nuestra devolución de llamada con la comprobación de nonce:
|
01
02
03
04
05
06
07
08
09
10
|
add_action( 'wp_ajax_jp_ajax_test', 'slug_ajax_callback' );add_action( 'wp_ajax_no_ppriv_jp_ajax_test', 'slug_ajax_callback' );function slug_ajax_callback() { if ( check_ajax_referer( 'jp', 'nonce' ) ) { //we'll handle this next } else{ wp_die( 'Nonce error' ); }} |
Ahora, la devolución de llamada verifica el nonce y, si pasa, no hace nada, por ahora. Si falla, devolverá un mensaje de error. Tenga en cuenta que colocamos lo que queríamos devolver dentro de wp_die() en lugar de usar echo o return. Eso le dice a PHP que devuelva nuestro mensaje y luego muera. Haremos lo mismo en un segundo con nuestra respuesta exitosa.
Como dije, vamos a devolver el título de una publicación específica. Eso no es emocionante, pero estoy tratando de mostrarte un patrón básico. Lo animaremos en la siguiente sección cuando le muestre cómo obtener variables del navegador en PHP. El punto ahora es ilustrar que puede usar cualquier función PHP o funciones en su devolución de llamada. Aquí está el código de ejemplo completo por ahora:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
add_action( 'wp_ajax_jp_ajax_test', 'slug_ajax_callback' );add_action( 'wp_ajax_no_ppriv_jp_ajax_test', 'slug_ajax_callback' );function slug_ajax_callback() { if ( check_ajax_referer( 'jp', 'nonce' ) ) { //make sure you set the ID of a post that exists here wp_die( get_the_title( 1 ) ); } else{ wp_die( 'Nonce error' ); }} |
Ahora, en el navegador, si hace clic en el enlace, debería ver el título de esa publicación en su contenedor de destino.
Pasar variables al servidor
Eso es todo. Ese es el patrón básico. Por supuesto, para que esto sea útil, querremos poder pasar algunas variables del navegador a la solicitud. Para ilustrar esto, analicemos nuestro ejemplo anterior. En este caso, devolveremos un campo personalizado para la publicación actual. Cree una nueva publicación y agregue un campo personalizado llamado «fecha» usando la interfaz de usuario del campo personalizado en el editor o usando update_post_meta().
Ahora, en el archivo de plantilla para publicaciones individuales, agregue esto dentro del bucle:
|
01
02
03
04
|
<?phpecho '<a id="get-date" href="#" post_id="' . esc_attr( get_the_id() .'">Get Date</a>';echo '<div id="date"></date>';?> |
Ahora, en su archivo JavaScript, agreguemos una segunda solicitud que sea similar al último ejemplo, pero con 2 nuevas adiciones para que podamos pasar el atributo HTML post_id de vuelta al servidor. Echar un vistazo:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
$( "#get-date" ).click(function() { var post_id =$( '#get-date' ).attr( 'post_id' ); $.get( jp.ajaxURL, { 'action': 'jp_get_date', 'nonce' : jp.nonce, 'post_id' : post_id, }, function( response ) { $( '#date ).append( response ); } ); }}); |
Ahora obtenemos el ID de la publicación del atributo HTML y lo agregamos a nuestra solicitud para que esté disponible para nosotros en la función de devolución de llamada de PHP.
Echemos un vistazo a cómo funciona eso. Una vez más, la devolución de llamada y la acción son casi iguales, observe que dado que la acción AJAX tiene un nombre diferente, los ganchos que usamos tienen un nombre diferente para que coincida:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
|
add_action( 'wp_ajax_jp_get_date', 'slug_get_date_ajax_callback' );add_action( 'wp_ajax_no_priv_jp_get_date', 'slug_get_date_ajax_callback' );function 'slug_get_date_ajax_callback() { if ( check_ajax_referer( 'jp', 'nonce' ) ) { //make sure you that the post_id is in the request and it's a number if ( isset( $_GET( 'post_id' ) && intval( $_GET( 'post_id' ) > 0 ) { $date = get_post_meta( $_GET( 'post_id' ), 'date', true ); if ( $date ) { wp_die( $date ); } wp_die( 'No date set.' ); } else{ wp_die( 'Nonce error' ); }} |
Esta nueva función de devolución de llamada es similar a la primera, pero debemos agregar algunas comprobaciones de seguridad adicionales para la seguridad y para evitar errores. Lo primero que hacemos es asegurarnos de que ‘post_id’ esté en la solicitud actual. Si es así, verificamos que sea un número o una cadena que represente un número. Si no es así, entonces algo salió mal, y eso podría ser algo malicioso, por lo que debemos abortar.
Si esas pruebas pasan, podemos usar post_id para obtener el metacampo get_post_meta(). Luego podemos probar si ese dato es válido, es decir, hay un valor y devolverlo. Si no, le devolveremos un mensaje.
Dominando el AJAX
En este artículo, le mostré el patrón básico del uso de AJAX en WordPress para enviar datos simples al servidor, usarlos en una función de PHP y devolver la respuesta al navegador. Depende de usted usar su creatividad para aplicar este patrón a sus propias necesidades. Una vez que haya aprendido esto, el siguiente paso es aprender cómo realizar solicitudes de publicación para guardar datos en su base de datos, pero ese es un tema para otro día.
Imagen en miniatura del artículo por sam_ding / shutterstock.com