48 Envio de datos con AJAX JQUERY en el curso Sistema de gestión escolar(PHP y MySql)FullStack

Duración: 28 min
Módulo: 🚀 Calificaciones (Lógica y Carga de Notas) Lección 4 de 6

Descripción

💻 Lección 48: Envío de Datos con AJAX y JQuery

Esta lección se centró en asegurar que se recopilen todos los identificadores necesarios y en configurar la llamada AJAX que enviará por lotes las notas y sus respectivos IDs al controlador.

I. 🧱 Preparación de la Base de Datos y la Vista

Antes de enviar los datos, se realizaron ajustes cruciales para garantizar la integridad y unicidad de los registros:

  • Modificación de la Tabla calificaciones: Se agregó la columna materia_id a la tabla calificaciones [01:08].
    • Esta adición es vital para crear una clave compuesta única que impida duplicados: docente_id, estudiante_id, y materia_id [01:44].
  • Recolección de IDs Faltantes: Para que el controlador pueda registrar o actualizar una nota, se hizo necesario recuperar tres identificadores adicionales:
    1. ID Docente (docente_id): Se agregó como un parámetro a la URL desde la vista de asignaciones del docente (index.php) y se leyó en la vista create.php [12:19].
    2. ID Materia (materia_id): Se agregó también como un parámetro a la URL desde la asignación del docente [20:21].
    3. ID Estudiante (estudiante_id): Se añadió un campo input oculto (type="hidden") a cada fila de la tabla, conteniendo el ID único del estudiante [15:29]. Este ID se lee dinámicamente usando JQuery dentro del bucle.

II. 🔗 Implementación de AJAX para el Envío de Datos

Se configuró el código JQuery para que, al hacer clic en el botón "Guardar Notas", se ejecute el ciclo for que itera por cada estudiante y realiza la llamada AJAX:

  1. Ruta del Controlador: La URL de destino del envío se definió apuntando al archivo del controlador: app/controller/calificaciones/create.php [04:41].
  2. Método de Envío: Se optó por la función $.get() (método GET de HTTP) de JQuery [05:06].
  3. Variables Enviadas: Dentro del bucle, la llamada AJAX empaqueta y envía las siguientes seis variables por cada estudiante:
    • id_docente
    • id_estudiante
    • id_materia
    • nota_1
    • nota_2
    • nota_3 [23:27]
  4. Verificación: En el controlador de PHP, se confirmó la recepción de las seis variables y se hizo un echo de la información para verificar que todos los datos se estaban enviando correctamente fila por fila, demostrando la comunicación exitosa entre la vista y el controlador [27:17].