Intégrer Ajax avec Django en Python

Cet article a pour but de démontrer ce qu’est Ajax, d’intégrer Ajax à Django, d’envoyer les requêtes get et post d’Ajax depuis un navigateur, et de gérer les données du site Django en Python.

Intégrer Ajax avec Django en Python

Ajax signifie JavaScript et XML asynchrones, mais qu’est-ce que cela signifie ? Ajax est simplement une technique de développement Web utilisée pour envoyer et récupérer des données en arrière-plan sans actualiser une page Web.

Un exemple réel d’Ajax est si nous nous dirigeons vers Twitter et ouvrons notre flux.

Après un certain temps, vous verrez une barre de menu apparaître en haut de votre écran indiquant que de nouveaux tweets sont disponibles, et si vous attendez encore plus longtemps, vous verrez que le nombre augmente à mesure que de plus en plus de personnes que vous suivez publient quelque chose sur Twitter.

Nous devons noter que notre page ne se rafraîchit jamais entièrement. Maintenant que nous avons une idée d’Ajax, voyons comment l’utiliser avec le framework Django.

Nous avons créé un projet simple pour montrer comment travailler avec Ajax, mais il est impossible de montrer comment travailler l’ensemble de notre projet. Si vous êtes familier avec Django, vous savez déjà comment créer un projet Django, nous avons donc un modèle nommé contact avec quelques champs et un modèle simple pour le formulaire de modèle de contact.

Lorsque nous soumettons le formulaire, les données seront enregistrées dans la base de données, redirigées vers la même page elle-même et définiront les URL correspondantes.

Nous utilisons jQuery pour déclencher Ajax, et CDN est également requis. Ainsi, la logique que nous ferons dans le formulaire chaque fois que nous soumettrons le formulaire est que si le formulaire est valide, le serveur répondra.

Nous utilisons du JavaScript normal pour récupérer les objets du formulaire, nous avons donc besoin d’un événement submit, et si cet événement est déclenché, il appellera une fonction submithandler.

Nous créons une fonction submithandler qui recevra l’événement par défaut, et nous allons empêcher l’action par défaut de la soumission du formulaire, ce qui signifie que le formulaire ne sera pas soumis, donc pour faire une requête Ajax, nous allons écrire du jQuery dans notre Fichier HTML.

Nous allons spécifier certains attributs dans l’objet Ajax ; le premier est type, qui est un type de demande.

Nous pouvons transmettre deux types de requêtes ; get ou post, il faut donc passer post. L’attribut suivant est le url qui signifie quelle URL nous voulons frapper la requête post.

Nous utiliserons donc ici l’index des templates de Django ; nous vous transmettrons l’url de notre page contact. Le contact est le nom de l’URL que nous écrirons plus tard dans le url.py.

Maintenant, le suivant est data, ce qui signifie que nous voulons que les données du formulaire soient côté serveur pour traiter les données du formulaire sur le serveur. Nous devons donc envoyer ces données dans la requête Ajax en utilisant l’ID de formulaire.

Le suivant est le dataType qui est le type de données que nous attendons du serveur, donc si nous envoyons une réponse HTTP dans les vues et que le formulaire est valide ou envoyons des données JSON, nous devons transmettre des données en JSON format, nous le passons donc en type JSON.

Nous avons passé l’attribut success pour le dernier, qui prend une fonction appelée successFunction. Cette fonction déclenchera une fenêtre d’alerte contextuelle si la demande aboutit.

<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>

Maintenant, nous devons définir l’URL avec le nom contact et appeler une méthode contact à partir du fichier views.py, ce qui signifie que lorsque l’utilisateur clique sur cette URL, la méthode contact appellera.

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

Maintenant, nous pourrions faire quelque chose dans le fichier views.py, donc nous savons que chaque fois que nous soumettons le formulaire, la fonction contact appellera la fonction correspondante et l’attrapera, et elle recevra une requête Ajax et vérifiera que le Ajax la requête est valide ou non en utilisant la méthode .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})

Cliquez ici pour lire la documentation officielle pour intégrer Ajax à Django.