Ajax sin usar jQuery en WordPress

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.

Puedes revisar este artículo en donde se explica cómo usar Ajax en WordPress, tomaremos el mismo ejemplo sólo que reemplazaremos el código de Javascript con jQuery.

 

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.

Suscríbete a DecodeCMS:  

 

La entrada Ajax sin usar jQuery en WordPress es un artículo reciente del sitio DecodeCMS.