Integrar Ajax con Django en Python

Este artículo tiene como objetivo demostrar qué es Ajax, integrar Ajax con Django, enviar solicitudes get y post de Ajax desde un navegador y manejar los datos en el sitio de Django en Python.

Integrar Ajax con Django en Python

Ajax significa JavaScript asíncrono y XML, pero ¿qué significa eso? Ajax es simplemente una técnica de desarrollo web utilizada para enviar y recuperar datos en segundo plano sin actualizar una página web.

Un ejemplo de Ajax del mundo real es si nos dirigimos a Twitter y abrimos nuestro feed.

Después de un tiempo, verá aparecer una barra de menú en la parte superior de la pantalla que indica que hay nuevos tweets disponibles y, si espera aún más, verá que el número aumenta a medida que más y más personas a las que sigue publican algo en Twitter.

Debemos tener en cuenta que nuestra página nunca se actualiza por completo. Ahora que tenemos una idea de Ajax, veamos cómo usarlo con el marco Django.

Creamos un proyecto simple para demostrar cómo trabajar con Ajax, pero es imposible demostrar cómo funciona todo nuestro proyecto. Si está familiarizado con Django, ya sabe cómo crear un proyecto de Django, por lo que tenemos un modelo llamado contact con algunos campos y un modelo simple para el formulario del modelo de contacto.

Cuando enviamos el formulario, los datos se guardarán en la base de datos, se redirigirán a la misma página y se establecerán las URL correspondientes.

Estamos usando jQuery para activar Ajax, y también se requiere CDN. Entonces, la lógica que haremos en el formulario siempre que lo enviemos es que si el formulario es válido, el servidor responderá.

Estamos utilizando JavaScript normal para obtener los objetos del formulario, por lo que necesitamos un evento submit, y si ese evento se dispara, llamará a una función submithandler.

Creamos una función submithandler que recibirá el evento de forma predeterminada y evitaremos la acción predeterminada del envío del formulario, lo que significa que el formulario no se enviará, por lo que para realizar una solicitud de Ajax, escribiremos algo de jQuery en nuestro archivo HTML.

Especificaremos algunos atributos en el objeto Ajax; el primero es type, que es un tipo de petición.

Podemos pasar dos tipos de peticiones; get o post, así que debemos pasar post. El siguiente atributo es url que significa la URL que queremos que reciba la petición post.

Así que usaremos el índice de plantillas de Django aquí; le pasaremos la URL de nuestra página de contact. El contact es el nombre de la URL que escribiremos más adelante en el url.py.

Ahora, el siguiente es data, que significa que queremos que los datos del formulario estén en el lado del servidor para procesar los datos del formulario en el servidor. Por lo tanto, debemos enviar esos datos en la solicitud de Ajax mediante el ID del formulario.

El siguiente es el dataType, que es el tipo de datos que esperamos del servidor, por lo que si enviamos alguna respuesta HTTP en las vistas y el formulario es válido o enviamos algunos datos JSON, debemos pasar datos en JSON. formato, por lo que lo pasamos en tipo JSON.

Pasamos el atributo success para el último, que toma una función llamada successFunction. Esta función generará una ventana de alerta emergente si la solicitud es exitosa.

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>

<script>
    const form = document.getElementById('form');
    form.addEventListener("submit", submitHandler);

    function submitHandler(e) {
        e.preventDefault();
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : '{% url 'contact' %}', // the url where we want to POST
            data        : $('#form').serialize(), // our form data
            dataType    : 'json', // what type of data do we expect back from the server
            success     : successFunction
        });
    }

    function successFunction(msg) {
        if (msg.message === 'success') {
            alert('Success!');
            form.reset()
        }
    }
</script>

Ahora necesitamos configurar la URL con el nombre contact y llamar a un método contact desde el archivo views.py, lo que significa que cuando el usuario acceda a esta URL, llamará el método contact.

urlpatterns = [
    path("", views.contact, name="contact"),
]

Ahora podríamos hacer algo en el archivo views.py, para que sepamos que siempre que enviemos el formulario, la función contact llamará a la función correspondiente y la detectará, recibirá una solicitud de Ajax y verificará que el Ajax la solicitud es válida o no utilizando el método .is_ajax().

from django.http import JsonResponse
from django.shortcuts import render, redirect
from .forms import ContactModelForm


def contact(request):
    form = ContactModelForm()

    if request.is_ajax():
        form = ContactModelForm(request.POST)
        print(request.POST)
        if form.is_valid():
            form.save()
            return JsonResponse({"message": "success"})
    return render(request, "contact.html", {"form": form})

Haga clic aquí para leer la documentación oficial para integrar Ajax con Django.