Actualización de una tabla HTML sin tener que refrescar la página usando PHP, JavaScript, Ajax, MySQL

Imagina que tienes una página web con una tabla que muestra información actualizada constantemente, pero cada vez que se actualiza la información, la página se refresca por completo. En este artículo te enseñaremos cómo  actualizar la tabla sin tener que recargar toda la página, utilizando PHP, JavaScript, Ajax y MySQL.

¿Qué es PHP, JavaScript, Ajax, y MySQL?

• PHP: Es un lenguaje de programación del lado del servidor que se utiliza para crear sitios web dinámicos.
• JavaScript: Es un lenguaje de programación del lado del cliente y del servidor que se utiliza para hacer que las páginas web sean interactivas.
• Ajax: Es una técnica de desarrollo web que permite actualizar parte de una página sin necesidad de recargarla por completo.
• MySQL: Es un sistema de gestión de base de datos relacional que se utiliza para almacenar y recuperar información.

Actualizando la tabla sin refrescar la página

Para realizar esto, primero necesitaremos crear un archivo PHP que se encargue de conectarse a la base de datos MySQL, recuperar la información necesaria y devolverla en formato JSON. Luego, utilizaremos JavaScript para enviar una solicitud Ajax al archivo PHP, recibir la respuesta en formato JSON y actualizar la tabla con los datos obtenidos.

Pasos a seguir:

1. Crear una tabla HTML con un identificador único, por ejemplo, <table id="tablaDatos"></table>.
2. Crear un archivo PHP que se conecte a la base de datos MySQL y devuelva los datos en formato JSON.
3. Utilizar JavaScript para enviar una solicitud Ajax al archivo PHP y recibir los datos en formato JSON.
4. Actualizar la tabla HTML con los datos obtenidos de la respuesta.

Código PHP

<?php
//archivo consultarDatos.php
//Conexión a la base de datos
$conexion = mysqli_connect("localhost", "usuario", "contraseña", "basededatos");
//Consulta a la base de datos
$resultado = mysqli_query($conexion, "SELECT * FROM tabla");
//Crear un array con los datos
$datos = array();
while($fila = mysqli_fetch_assoc($resultado)) {
    $datos[] = $fila;
}
//Devolver los datos en formato JSON
echo json_encode($datos);
mysqli_close($conexion);
?>

Código JavaScript

//Archivo actualizarTabla.js
$(document).ready(function() { //Enviar solicitud Ajax al archivo PHP         
         $.ajax({ url: "consultarDatos.php", 
          type: "GET", success: function(response) { 
          var datos = JSON.parse(response); 
          var tabla = $("#tablaDatos");
 
        for(var i = 0; i < datos.length; i++) {
            var fila = $("<tr></tr>");
            var celda1 = $("<td></td>").text(datos[i].campo1);
            var celda2 = $("<td></td>").text(datos[i].campo2);
            
            fila.append(celda1, celda2);
            tabla.append(fila);
        }
    }
});
});

En este artículo, aprendiste cómo actualizar una tabla HTML sin tener que refrescar la página; siguiendo los pasos detallados y utilizando el código de ejemplo proporcionado, podrás lograr una experiencia más fluida y dinámica para los usuarios de tu página web.