Créer et utiliser une API REsT avec Django et jQuery

• 2 min read • Jean Ribes
Tags: Programmation   Français  

Bien sûr, ce guide n'a pas vocation à être exhaustif, c'est juste un petit mémo pour intégrer rapidement une fonctionnalité dynamique à son site. jQuery suffit pour quelques requêtes, mais quand votre site dépend trop d' AJAX, il vaut mieux utiliser Angular ou ReactJS...
C'est ce que j'utilise pour afficher le status du serveur Minecraft sur la page services

Côté serveur, on ne présente plus Django; et pour créer des API REsT JSON, DjangoRestFramework facilite le travail. D.R.F. n'est pas nécessaire, mais c'est facile à prendre en main et puissant.

Côté client, il suffit de charger jQuery et de créer un petit script qui effectue la communication avec le serveur.
Voir DRF QuickStart pour commencer à coder.

Code serveur

#views.py
from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['get']) #définit une vue gérée par DRF, et permet d'utiliser Response
def hello_world(request):
    return Response({"message":"Hello World !"}) #vous pouvez aussi envoyer du texte brut

Ne pas oublier de router sa view :

#urls.py
from django.conf.urls import url
from test import views

urlpatterns = [
    url(r'hello/world/', views.hello_world),
    ]

Exemple de réponse

En visitant /hello/world, on obtient

HTTP 200 OK
Allow: OPTIONS, GET
Content-Type: application/json
Vary: Accept

{
    "message": "Hello World !"
}

Ensuite, il faut servir une page HTML pour consommer notre API. Il y a plusieurs options :

  • Servir la page en statique depuis Django
  • Utiliser un proxy nginx pour servir la page sur le même FQDN que l'API
  • activer CORS et CSRF et utiliser un autre domaine

Le 3e cas est plus flexible, potentiellement moins sécurisé, et plus difficile à configurer. Il faut installer et activer django-cors-headers, potentiellement utiliser le décorateur @csrf_exempt.
from django.views.decorators.csrf import csrf_exempt

note: pour faire des requêtes depuis une page HTML ouverte depuis l'explorateur de ficher (file:///), il faut mettre

CORS_ORIGIN_WHITELIST = (
    'null',
    ...
    )

Code client

Il faut un peu de HTML pour insérer les données, et un moyen de trigger le Javascript.

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<p id="reponse-ajax">Ce texte devrait être remplacé par Hello World</p>
<button id="trigger">Contacter le serveur d'API</button>

et maintenant le javascript. Ne pas oublier d'inclure jQuery

<script>
$('#trigger').on('click',function () {
        $.ajax({
            url: "http://localhost:8000/hello/world",
            success: function (result) {
                $("#reponse-ajax").html(result.message);
                //console.log(result);
            },
            error: function (result, status, error) {
                console.log(error);
            }
        });
    });
    </script>

Read more