# Dynamische webontwikkeling vereenvoudigen met Django en HTMX (deel 4): Hoe zit het met de payload? Bij Ajax-verzoeken met de bestaande JavaScript `fetch` sturen we bij een POST-verzoek meestal de payload direct samen, vaak met `JSON.stringify()`. Het werkt ongeveer zo: ```JavaScript fetch("/api/todos/", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRFToken": csrftoken }, body: JSON.stringify({ title: "장보기", done: false, priority: 3 }) }) ``` Hoe zit dat dan met **HTMX**? Hoe verstuurt `hx-post` eigenlijk data naar de server? Veel voorbeelden tonen alleen zeer eenvoudige functionaliteiten, waardoor het verrassend moeilijk is om praktische voorbeelden te vinden voor het versturen van complexe payloads. In dit bericht zullen we de methoden voor dataoverdracht in HTMX en hoe de server deze verwerkt, volledig uitleggen. ![Schematische weergave van de HTMX-gegevensstroom in DJANGO](/media/whitedec/blog_img/fbe9c41ba8ea4eabb78e760e1f768482.webp) ------ ## Dataoverdrachtsmethoden van HTMX {#sec-1f930b1a0dad} De payload-benadering van `fetch` en de dataoverdrachtsmethode van `hx-post` zijn **behoorlijk verschillend**. Bij `fetch` maakt de ontwikkelaar zelf een object en converteert dit naar JSON om het in de body te plaatsen. **HTMX daarentegen verzamelt in principe waarden uit de DOM en stuurt deze door.** De denkwijze van HTMX is niet zozeer "JS-objecten direct samenstellen", maar eerder **"waarden uit HTML-elementen verzamelen om verzoekparameters te creëren"**. Hiervoor worden doorgaans de volgende drie methoden gebruikt: ### 1) Waarden verzenden op basis van een formulier {#sec-f5086851ac19} Dit is de meest HTML-vriendelijke en goed aansluitende methode voor Django. ```html
``` In dit geval verzamelt HTMX de invoerwaarden binnen het formulier en voegt deze toe aan het verzoek. De standaardcodering is **URL-encoded form data**, net als bij een reguliere formulierinzending. In een Django-view ontvang je dit zoals gewoonlijk: ```Python def create_todo(request): title = request.POST.get("title") priority = request.POST.get("priority") done = request.POST.get("done") ``` ### 2) Waarden van andere elementen opnemen zonder formulier: `hx-include` {#sec-a2c0e1f9e1ca} Dit gebruik je wanneer je een `hx-post` aan een knop wilt koppelen en tegelijkertijd specifieke, verderop gelegen invoerwaarden wilt meesturen. ```HTML ``` `hx-include` voegt de waarden van de gespecificeerde elementen toe aan het verzoek. Je hoeft niet de hele sectie in een `
` te wikkelen om een vergelijkbaar resultaat als een payload te bereiken, wat erg handig is bij weinig invoervelden. ### 3) Verborgen of berekende waarden toevoegen: `hx-vals` {#sec-f3e44212771a} Dit is de functionaliteit die het dichtst in de buurt komt van het direct samenstellen van een deel van de payload in `fetch`. ```HTML ``` `hx-vals` voegt extra parameters toe aan het verzoek. Standaard wordt de JSON-syntaxis zoals hierboven gebruikt, maar met het voorvoegsel `js:` kun je ook dynamisch berekende JavaScript-waarden versturen. ```HTML ``` Ook in dit geval leest Django de waarden via `request.POST`. Dit komt omdat `hx-vals` **"waarden definieert met een JSON-achtige syntaxis"**, maar niet de verzoekbody zelf in JSON-formaat maakt. ------ ## Belangrijk: `hx-vals` is niet hetzelfde als een "JSON Payload" {#sec-c31077e0c2ea} Dit is het meest verwarrende aspect wanneer je voor het eerst met HTMX werkt. ```HTML ``` Nu pas verkrijgen we de vertrouwde JSON-payloadmethode. In dit geval zal `request.POST` in de Django-view leeg zijn, dus moet je `request.body` direct uitlezen. ```Python import json def create_todo_api(request): data = json.loads(request.body) title = data.get("title") # ... logica verwerken ... return JsonResponse({"ok": True}) ``` ------ ## HTMX en DRF hebben een filosofische kloof, maar hoeven niet per se te worden samengevoegd. {#sec-aff378931c81} Hoewel je JSON kunt versturen met een extensie, blijft de vraag of dit wel de HTMX-manier is. Dit komt omdat twee filosofieën hier botsen: **"datacentrisch (DRF)"** en **"hypermedia-centrisch (HTMX)"**. Als je besluit HTMX correct te gebruiken, moet je wellicht even afstand nemen van de datacentrische denkwijze. Waarden versturen met ``, `hx-include`, `hx-vals`, en de server laten reageren met **HTML-snippets in plaats van JSON** via `request.POST` – dat is waar HTMX het meest tot zijn recht komt. ### Wat als DRF-serializers te waardevol zijn om op te geven? {#sec-2a26aeec3b61} De serializers van DRF zijn ongelooflijk krachtig. Moeten we dit handige validatiehulpmiddel opgeven en terugvallen op het handmatig `request.POST.get()` gedoe als we HTMX gebruiken? Gelukkig kunnen DRF-serializers niet alleen JSON, maar ook formulierdata uitstekend valideren. Omdat dit onderwerp te uitgebreid is voor dit bericht, zullen we in het volgende deel dieper ingaan op de **"co-existentie van HTMX en DRF-serializers"**. ------ ## Conclusie {#sec-ab81cf195815} De belangrijkste punten van vandaag zijn: 1. **HTMX verzamelt in principe waarden uit de DOM.** De aanpak verschilt van `fetch`, waarbij je direct payload-objecten samenstelt. 2. **Drie overdrachtsmethoden:** `` voor de hele set, `hx-include` om specifieke elementen te kiezen, en `hx-vals` om extra waarden toe te voegen. 3. **De standaard is formulierdata.** Let op: zelfs als `hx-vals` JSON-syntaxis gebruikt, betekent dit niet dat de werkelijke JSON-body wordt verzonden. 4. **Als JSON absoluut noodzakelijk is, gebruik dan de `json-enc` extensie.** Maar onthoud dat de essentie van HTMX ligt in het uitwisselen van HTML-fragmenten. Volgende keer komen we terug met methoden om het gemak van DRF in HTMX te integreren! **Gerelateerde artikelen** - [Dynamische webontwikkeling vereenvoudigen met Django en HTMX (deel 1)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification/) - [Dynamische webontwikkeling vereenvoudigen met Django en HTMX - Ajax (deel 2)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification-2/) - [Dynamische webontwikkeling vereenvoudigen met Django en HTMX (deel 3): Django-integratie](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification-3/) - [Dynamische webontwikkeling vereenvoudigen met Django en HTMX (deel 5)](/ko/whitedec/2025/1/27/django-htmx-advanced-features/) - [Dynamische webontwikkeling vereenvoudigen met Django en HTMX (deel 6): HTML-retourmethode](/ko/whitedec/2025/1/27/django-htmx-html-response/) - [Dynamische webontwikkeling vereenvoudigen met Django en HTMX (deel 7): JSON-retourmethode](/ko/whitedec/2025/1/27/django-htmx-json-response/)