Django è un framework davvero piacevole da usare, anche per creare applicazioni web dinamiche.

Il fatto di poter utilizzare librerie Python inoltre lo rende davvero comodo in molti ambiti dello sviluppo web.

Il suo linguaggio di template inoltre lo rende davvero comodo anche per generare pagine web in base ai dati richiesti.

Il problema

Abbiamo però una forte limitazione: le pagine web di Django non possono essere generate senza ricaricare la pagina, non sono davvero dinamiche.

In un contesto moderno non avere la possibilità di sviluppare una SPA (Single Page Application) è una limitazione forte.

Si potrebbe, certo, limitarsi a utilizzare Django solo lato server ma tutta la comodità offerta dai Template di Django andrebbe persa.

La soluzione

La soluzione proposta è davvero semplice: utilizzare jQuery per effettuare richieste AJAX e ritornare dell’HTML da inserire dinamicamente all’interno della pagina.

Questo permette sia di avere una pagina web dinamica ma anche di utilizzare il Template Language di Django per generare le nostre pagine web.

Esempio pratico

Abbiamo un sito di e-commerce, la pagina contiene dunque una lista di prodotti.

Ci sono diversi filtri per visualizzare i prodotti in base a certi parametri.

Normalmente, l’utente dovrebbe selezionare i parametri che gli interessano, cliccare su un pulsante “Applica” e la pagina si ricaricherà mostrando il contenuto richiesto.

Noi vogliamo però che non si debba cliccare sul pulsante e ricaricare la pagina ma vogliamo che i prodotti vengano visualizzati in maniera dinamica. Come fare?

Prima di tutto creiamo un nuovo semplice file “lista_prodotti.html” che conterrà SOLO la lista di prodotti (niente body, head o elementi simili visto che sono già definiti nella pagina di base che conterrà poi questo nuovo codice):

{% for prodotto in prodotti %}
    {{ prodotto.nome }}
{% endfor %}

Adesso occupiamoci del metodo nel views.py che si occuperà di renderizzare il codice:

def lista_prodotti_filtrati(request):
    prezzo_max = request.GET.get(prezzomax)
    lista_prodotti = Prodotto.objects.all()
    prodotti_filtrati = []
    if prezzo_max != 0:
        prezzo = int(prezzo_max)
        for prod in lista_prodotti:
            if prod.prezzo <= prezzo:
                prodotti_filtrati.append(prod)
    else:
        prodotti_filtrati = lista_prodotti
    return render(request, 'applicazione/lista_prodotti.html', {
        prodotti: prodotti_filtrati
    })

Questa semplice View non fa altro che ritornare una lista di prodotti filtrati in base al prezzo.

Colleghiamo quindi la nostra nuova View a un URL all’interno dell’urls.py.

Adesso non ci resta che chiamare la View con una richiesta HTTP in modo dinamico inserire il codice HTML generato all’interno della pagina:

$('#bottoneFiltra').click(function() {
    $.ajax({
        url: '/applicazione/listaprodotti/?prezzomax=&' + prezzoMax.toString(),
        success: function(data) {
            $('#divListaProdotti').html(data);
        },
        dataType: 'text',
    });
});

Come vedete è semplicissimo, la pagina non dovrà essere ricaricata: ci penserà JavaScript a chiamare il codice HTML e a inserirlo nella pagina, il tutto generando la pagina con il Django Template Language.

Spero che questo tutorial ti sia servito, alla prossima!