HTMX ist ein Werkzeug, das sich nahtlos in Django integrieren lässt und mit einfachen Einstellungen dynamische Webanwendungen erstellen kann. In diesem Teil werden wir die Vorbereitungen und Einstellungen für die Integration von Django und HTMX betrachten.

Integration von Django und HTMX für dynamische Webentwicklung

1. Vorbereitungen zur Integration von HTMX in Django

Um HTMX in Django zu verwenden, befolgen Sie die folgenden Schritte:

1.1 Laden der HTMX-JavaScript-Bibliothek

Fügen Sie den CDN-Link im <head>-Tag Ihrer HTML-Vorlagendatei hinzu.

<script src="https://unpkg.com/htmx.org"></script>

1.2 Verwenden der HTMX-Attribute in Django

HTMX bietet verschiedene Attribute, um HTTP-Anfragen einfach zu bearbeiten.

  • hx-get: Attribut zum Senden von GET-Anfragen
  • hx-post: Attribut zum Senden von POST-Anfragen
  • hx-target: Gibt das HTML-Element an, in das die Serverantwortdaten eingefügt werden

HTML-Code Beispiel

<div id="content">
    <button hx-get="/get-data/" hx-target="#result">Daten abrufen</button>
    <button hx-post="/submit/" hx-target="#result">Daten senden</button>
</div>
<div id="result">Die Ergebnisse werden hier angezeigt.</div>

2. Verarbeitung von Django-Ansichten und HTMX-Anfragen

2.1 Verarbeitung von GET-Anfragen

from django.http import HttpResponse

def get_data(request):
    if request.method == "GET":
        return HttpResponse("<p>GET-Anfrage erfolgreich bearbeitet!</p>")

2.2 Verarbeitung von POST-Anfragen

from django.http import HttpResponse

def submit_data(request):
    if request.method == "POST":
        return HttpResponse("<p>POST-Anfrage erfolgreich bearbeitet!</p>")

2.3 URL-Mapping

from django.urls import path
from .views import get_data, submit_data

urlpatterns = [
    path('get-data/', get_data, name='get_data'),
    path('submit/', submit_data, name='submit_data'),
]

3. Aspekte, die bei der HTMX-Integration zu beachten sind

3.1 Verarbeitung von CSRF-Token

Django hat den CSRF-Schutz standardmäßig aktiviert, sodass ein CSRF-Token für POST-Anfragen erforderlich ist. Um POST-Anfragen in HTMX zu verarbeiten, wählen Sie eine der beiden folgenden Methoden:

1. Verwendung des HTML <meta>-Tags und von JavaScript-Skripten
<meta name="csrf-token" content="{{ csrf_token }}">
<script>
    document.body.addEventListener('htmx:configRequest', function (event) {
        event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
    });
</script>
2. Einfügen von {% csrf_token %} im HTML <form>-Tag
<form hx-post="/submit/" hx-target="#result">
    {% csrf_token %}
    <input type="text" name="name" placeholder="Bitte Namen eingeben">
    <button type="submit">Einreichen</button>
</form>
<div id="result"></div>

Weitere Informationen zur Verarbeitung von CSRF-Token werden im nächsten Teil behandelt.

3.2 Unterscheidung von HTMX-Anfragen

Ab Django 4.2 können Sie das Attribut request.htmx verwenden, um HTMX-Anfragen zu unterscheiden.

from django.shortcuts import render

def my_view(request):
    if request.htmx:  # HTMX-Anfrage
        return render(request, 'partials/snippet.html')
    return render(request, 'index.html')  # gesamte Seite

4. Gesamter Ablauf der Integration von HTMX und Django

4.1 Vollständiges HTML-Beispiel

<!DOCTYPE html>
<html>
<head>
    <title>HTMX Demo</title>
    <script src="https://unpkg.com/htmx.org"></script>
    <meta name="csrf-token" content="{{ csrf_token }}">
    <script>
        document.body.addEventListener('htmx:configRequest', function (event) {
            event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
        });
    </script>
</head>
<body>
    <div id="content">
        <button hx-get="/get-data/" hx-target="#result">GET-Anfrage</button>
        <button hx-post="/submit/" hx-target="#result">POST-Anfrage</button>
    </div>
    <div id="result">Die Ergebnisse werden hier angezeigt.</div>
</body>
</html>

Abschluss dieses Teils

In diesem Teil haben wir die erforderlichen Vorbereitungen und Einstellungen für die Integration von Django und HTMX betrachtet. Im nächsten Teil werden wir uns mit der Verarbeitung von CSRF-Token befassen und die sichere Integration von Django und HTMX detailliert behandeln. Seien Sie gespannt! 😊