Acabamos de ver cómo hacer una petición HTTP GET usando AJAX, jQuery y PHP. Ahora veremos cómo enviar un formulario con jQuery usando AJAX, procesarlo con PHP y recibir la respuesta de nuevo del lado del cliente. Para lograr esto, usaremos el método $.post y la librería de jQuery. Nota: recuerda que puedes hacer esto sin jQuery. ...
En este post te explicaré cómo usar forEach en JavaScript con algunos ejemplos. Esta función permite recorrer o iterar arreglos de todo tipo en el lenguaje JS y ahorrar algunas líneas de código si lo combinamos con las funciones flecha. ...
En este post te mostraré a traer datos desde PHP usando AJAX. En el primer ejemplo veremos cómo inyectar una página web (fragmento de HTML) a través de AJAX. Dentro del segundo ejemplo veremos cómo traer datos JSON desde PHP de igual manera usando AJAX. ...
Enviar datos a PHP usando AJAX En este post vamos a ver cómo enviar un formulario de HTML a PHP pero sin recargar la página, simplemente usando AJAX. Recordemos que AJAX es una técnica que permite enviar y recibir datos de manera asíncrona, sin bloquear el hilo principal, además de ahorrar ancho de banda pues solo cargamos lo que se necesita. ...
En este post te mostraré a enfocar o darle focus a un elemento de un formulario de HTML usando JavaScript, ya sea un input o un textarea. Enfocar un elemento en JavaScript es hacer que, cuando el usuario comience a escribir usando el teclado, el texto aparezca en el campo de texto, en pocas palabras que se enfoque el input o textarea. Para esto vamos a usar querySelector, pues necesitamos una referencia al DOM. ...
Renderizar o dibujar una tabla HTML con JavaScript En este post te mostraré a crear una tabla dinámica o elemento <table> de HTML con JavaScript. Es decir, con JavaScript puro dibujar una tabla, agregarle filas y columnas. Para ello no usaremos ningún framework. Las funciones que veremos son: document.createElement - Para crear un elemento, en este caso el tr y el td document.querySelector - Obtener referencia a elementos del DOM elemento.appendChild - Adjuntar un elemento hijo a otro elemento Lo que vamos a dibujar en la tabla es un arreglo. Es decir, a partir del arreglo vamos a dibujar una tabla HTML con JavaScript de manera dinámica. ...
Uso de los atributos data en HTML y JavaScript Los atributos data de HTML son atributos personalizados que ayudan a asociar información a un elemento HTML (incluso si es creado de manera dinámica) con JavaScript. Estos atributos vienen de maravilla cuando tenemos elementos dinámicos y queremos acceder a ellos en el click de un botón o de ellos mismos. Lo que haremos hoy es ver cómo asociar información de una variable de JavaScript a un elemento HTML para después recuperarla en el click del botón: ...
Explicación de querySelector y querySelectorAll en JavaScript Introducción a querySelector y querySelectorAll en JS. En este post te explicaré dos funciones de JavaScript que funcionan para obtener referencia a un elemento del DOM. Estoy hablando de: document.querySelector document.querySelectorAll Que bien son un remplazo de document.getElementById y otras funciones un poco complejas. ...
Cortar cadena (obtener parte de string) en JavaScript En este post te mostraré a obtener un fragmento de una cadena en JavaScript, es decir, cortar o extraer parte de una cadena de otra usando JS. Este ejercicio sirve para extraer parte de una cadena en el navegador y en Node.js Nota: recuerda que esto ya lo hicimos con PHP. ...
Códigos de barras con JavaScript En este post te voy a mostrar algunos ejemplos y usos de la librería JsBarcode para generar códigos de barras en elementos HTML usando JavaScript. Vamos a generar códigos de barras con JavaScript en 3 elementos: SVG Canvas Imagen Si deseas mantener la calidad del código de barras, recomiendo que uses el formato SVG. Nota: esta librería no necesita otras librerías o dependencias, funciona con JavaScript puro y por lo tanto se puede usar en cualquier proyecto de JavaScript. ...