• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Ajax sin usar jQuery en WordPress

Ajax sin usar jQuery en WordPress

Ajax sin usar jQuery en WordPress

[ hace 8 meses ] [ Autor: Jhon Marreros Guzmán ][ Core - Avanzado] [ ]

funcionalidad js

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Subir archivos en WordPress usando Ajax
  • Insertar Ajax en WordPress de manera correctaAjax en WordPress de manera correcta
  • Deshabilitar verificación del correo electrónico de administraciónDeshabilitar verificación del correo electrónico de administración
  • Deshabilitar el editor de bloques para Widgets en WordPressDeshabilitar el editor de bloques para Widgets en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Personalizar la página de error 404 en WordPress

Agregar el campo de cantidad en la lista de productos de WooCommerce

Archivo HTML como página de inicio en WordPress

Enviar datos desde PHP a Javascript en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados