This content originally appeared on DEV Community and was authored by Gabriel Villacis
Tutorial 3: Creación del Formulario con Django, Envío con Axios vía AJAX y Presentación de Mensajes con SweetAlert2
Objetivo: En este tutorial, aprenderás a crear un formulario con Django, enviarlo mediante Axios vía AJAX sin recargar la página, y mostrar mensajes interactivos con SweetAlert2. Mantendremos la estructura HTML existente, configuraremos los campos del formulario según el modelo de Django, y cargaremos dinámicamente las categorías desde la base de datos.
Paso 1: Creación del Formulario en Django utilizando ModelForm
Utilizaremos un formulario basado en el modelo (ModelForm) para gestionar las validaciones automáticamente y enviar los datos de manera estructurada.
-
Crear el archivo
forms.pyen la aplicacióniniciativas:
En el archivo iniciativas/forms.py, define el formulario:
from django import forms
from .models import Iniciativa
class IniciativaForm(forms.ModelForm):
class Meta:
model = Iniciativa
fields = ['nombre', 'descripcion', 'categoria', 'direccion', 'ubicacion_lat', 'ubicacion_lng']
Este formulario contendrá todos los campos necesarios (nombre, descripcion, categoria, etc.), lo que permite que las validaciones se apliquen de manera automática según el modelo Iniciativa.
Paso 2: Ajustes en la Vista Principal para Cargar las Categorías
El formulario contiene un campo select que debe mostrar las categorías almacenadas en la base de datos. Para esto, realizaremos un ajuste en la vista principal para pasar las categorías al template.
-
Modificar la vista principal (
views.py) para cargar las categorías:
En el archivo iniciativas/views.py, ajusta la vista que renderiza la página principal para incluir las categorías desde la base de datos:
from django.shortcuts import render
from .models import Categoria
def home(request):
categorias = Categoria.objects.all()
return render(request, 'index.html', {'categorias': categorias})
Esta vista obtiene todas las categorías del modelo Categoria y las pasa al template index.html para que se muestren en el formulario.
Paso 3: Vista para Procesar el Formulario
Vamos a definir una vista que maneje la recepción de los datos enviados por el formulario vía AJAX y que devuelva una respuesta en formato JSON para que Axios la pueda manejar.
-
Crear la vista en
views.pypara procesar el formulario:
En el archivo iniciativas/views.py, define la vista que procesa el formulario enviado:
from django.http import JsonResponse
from .forms import IniciativaForm
def procesar_iniciativa(request):
try:
if request.method == 'POST':
form = IniciativaForm(request.POST)
if form.is_valid():
form.save()
return JsonResponse({'message': 'Iniciativa registrada correctamente'}, status=200)
else:
return JsonResponse({'errors': form.errors}, status=400)
except Exception as e:
return JsonResponse({'error': 'Ocurrió un error inesperado: {}'.format(str(e))}, status=500)
Esta vista valida los datos del formulario, guarda la iniciativa si los datos son correctos y devuelve una respuesta en formato JSON con un mensaje de éxito o los errores correspondientes.
Paso 4: Configuración de la URL para Procesar el Formulario
Debemos configurar la ruta que se utilizará para procesar el formulario cuando se envíen los datos.
-
Actualizar el archivo
urls.py:
En el archivo iniciativas/urls.py, añade la ruta para procesar el formulario:
from django.urls import path
from . import views
urlpatterns = [
path('procesar_iniciativa/', views.procesar_iniciativa, name='procesar_iniciativa'),
path('', views.home, name='home'),
]
- La ruta
procesar_iniciativa/es la que maneja la solicitud de envío del formulario y devuelve una respuesta en formato JSON.
Paso 5: Ajustes en la Plantilla HTML del Formulario
El formulario debe estar configurado para que los nombres de los campos coincidan con los del modelo, y también debe incluir el campo select de categorías cargadas desde la base de datos.
- Configurar el formulario HTML:
Asegúrate de que los campos del formulario tengan los atributos id y name configurados correctamente, para que coincidan con los nombres de los campos en el modelo.
<section id="registro">
<h2>Registrar Nueva Iniciativa</h2>
<form id="form-iniciativa" method="POST" data-url="{% url 'procesar_iniciativa' %}">
{% csrf_token %}
<label for="nombre">Nombre de la Iniciativa:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="descripcion">Descripción:</label>
<textarea id="descripcion" name="descripcion" rows="5" required></textarea>
<label for="categoria">Categoría:</label>
<select id="categoria" name="categoria" required>
{% for categoria in categorias %}
<option value="{{ categoria.id }}">{{ categoria.nombre }}</option>
{% endfor %}
</select>
<label for="direccion">Dirección:</label>
<input type="text" id="direccion" name="direccion" required>
<label for="ubicacion_lat">Latitud:</label>
<input type="text" id="ubicacion_lat" name="ubicacion_lat" required>
<label for="ubicacion_lng">Longitud:</label>
<input type="text" id="ubicacion_lng" name="ubicacion_lng" required>
<input type="submit" value="Registrar Iniciativa"></input>
</form>
</section>
- El campo
selectde categorías se llena dinámicamente con las categorías que el backend pasa al template. - Los atributos
idynameestán configurados de acuerdo con los nombres de los campos del modelo para asegurar que los datos se envíen correctamente.
Paso 6: Enviar el Formulario con Axios y Mostrar Mensajes con SweetAlert2
Para enviar el formulario sin recargar la página, utilizamos Axios, y para mostrar los mensajes de éxito o error, SweetAlert2.
-
Crear el archivo
registro.jspara procesar el formulario:
En el archivo static/js/registro.js, añade el siguiente código para enviar los datos vía AJAX con Axios y mostrar los mensajes con SweetAlert2:
document.getElementById('form-iniciativa').addEventListener('submit', function(event) {
event.preventDefault();
let formData = new FormData(this);
let url = this.getAttribute('data-url');
// Mapeo de nombres de campos del modelo a labels del formulario
const fieldLabels = {
nombre: 'Nombre de la Iniciativa',
descripcion: 'Descripción',
categoria: 'Categoría',
direccion: 'Dirección',
ubicacion_lat: 'Latitud',
ubicacion_lng: 'Longitud'
};
axios.post(url, formData)
.then(response => {
Swal.fire({
icon: 'success',
title: 'Iniciativa Registrada',
text: 'La iniciativa ha sido registrada con éxito.',
confirmButtonText: 'OK'
});
this.reset();
})
.catch(error => {
let errores = error.response.data.errors || error.response.data.error;
let mensajeError = "<ul>";
if (typeof errores === 'object') {
for (let campo in errores) {
let label = fieldLabels[campo] || campo;
errores[campo].forEach(function(errorMsg) {
mensajeError += `<li><strong>${label}:</strong> ${errorMsg}</li>`;
});
}
} else {
mensajeError += `<li>${errores}</li>`;
}
mensajeError += "</ul>";
Swal.fire({
icon: 'error',
title: 'Error al Registrar',
html: mensajeError,
confirmButtonText: 'Revisar'
});
});
});
- Axios envía los datos del formulario al backend sin recargar la página.
-
SweetAlert2 muestra mensajes interactivos de éxito o error dependiendo de la respuesta del servidor.
- Incluir Axios y SweetAlert2 en el HTML:
Asegúrate de incluir los CDN de Axios y SweetAlert2 en el archivo index.html:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.all.min.js"></script>
Paso 7: Verificación
- Iniciar el servidor de desarrollo:
Ejecuta el siguiente comando para iniciar el servidor:
poetry run python manage.py runserver
-
Prueba el formulario de registro:
- Accede a la página del formulario de registro (
http://127.0.0.1:8000/). - Completa el formulario con datos válidos y verifica que:
- Los datos se envían correctamente mediante Axios sin recargar la página.
- Se muestra un mensaje de éxito con SweetAlert2 al registrar la iniciativa.
- Si hay errores, los mensajes de error se muestran correctamente con los labels correspondientes.
- Accede a la página del formulario de registro (
Conclusión
En este tutorial, has aprendido a:
- Crear un formulario en Django usando
ModelForm. - Configurar una vista para cargar dinámicamente las categorías desde la base de datos.
- Enviar los datos del formulario mediante Axios vía AJAX sin recargar la página.
- Mostrar mensajes de éxito o error interactivos utilizando SweetAlert2.
- Configurar correctamente el formulario para que los nombres de los campos coincidan con los del modelo en Django.
Este enfoque mejora la interacción del usuario al registrar iniciativas ecológicas, proporcionando una experiencia más fluida y moderna.
This content originally appeared on DEV Community and was authored by Gabriel Villacis
Gabriel Villacis | Sciencx (2024-10-03T00:27:39+00:00) Gestor de Iniciativas Ecológicas: Django (Parte 3). Retrieved from https://www.scien.cx/2024/10/03/gestor-de-iniciativas-ecologicas-django-parte-3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.