# 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.  ------ ## 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 `