Ajax sin usar jQuery en WordPress

[ 25 mayo 2022 ] [ Autor: Jhon Marreros Guzmán ][ Core - Avanzado] [ ]

funcionalidad js

En un artículo anterior habíamos visto cómo usar Ajax en WordPress de forma correcta, en este artículo vamos a partir del mismo ejemplo pero vamos a realizarlo usando Javascript sin la librería jQuery.

Generalidades

Este es un artículo experimental, de momento aún se usa jQuery en WordPress por lo que difícilmente a corto plazo se deje de usar. Sin embargo Javascript ha evolucionado y podemos realizar peticiones directamente con la función nativa Fetch.

Código javascript para trabajar con Ajax en WordPress

Este código es parte del artículo de ejemplo

const readMore = document.querySelectorAll('.more-link');

readMore.forEach( item => {
  item.addEventListener('click', e => {
    e.preventDefault();
    const id   = item.getAttribute('href').replace(/^.*#more-/,'');
    const url = dcms_vars.ajaxurl;

    const formData = new FormData();
    formData.append( 'action', 'dcms_ajax_readmore' );
    formData.append( 'id_post', id );

    item.text = 'cargando...';

    fetch(url, {
      method: 'POST',
      body: formData
    })
    .then( res => res.text() )
    .then( data => {
      const content = document.getElementById('post-'+id).getElementsByClassName('entry-content')[0];
      content.innerHTML = data;
    } )
    .catch( err => console.log( err ) );
  });
});

En el código anterior:

• Seleccionamos los elementos con la clase more-link
• Recorremos los elementos encontrados con un bucle for y agregamos un evento click para cada uno
• Prevenimos el click y capturamos el ID de la entrada desde el texto de la url
• Usamos los parámetros pasados por PHP en el objeto dcms_vars
• Utilizamos el objeto formData para enviar datos desde Javascript
• Cambiamos el texto del enlace
• Usamos la función nativa fetch de Javascript para consultar la url Ajax de WordPress
• Como parte de la función fetch también pasamos la data
• Obtenemos la respuesta a través de una promesa
• Devolvemos la data formateada a texto a través de otra promesa
• Mostramos la data en un elemento HTML
• Finalmente capturamos errores en caso ocurran y los reportamos en consola

Conclusión

Las versiones actuales de Javascript y el soporte que tiene actualmente en todos los navegadores permiten que poco a poco librerías como jQuery queden en desuso. En este artículo hemos visto cómo puedes usar directamente Javascript sin jQuery para hacer peticiones Ajax en WordPress.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando...