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.

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

Cargando...