Zo werkt het: een verzoek met htmx
Dezelfde stappen als bij één klik en één formulier, maar nu stuurt htmx het verzoek. Aan de serverkant verandert er bijna niets; het verschil zit aan het begin en aan het eind.
Browser: Je klikt op een knop. htmx ziet hx-get of hx-post op het element en houdt de browser tegen: geen nieuwe pagina. · Zonder herladen met htmx
Browser: htmx stuurt het verzoek. Een GET of een POST, met dezelfde velden als anders. In Netwerk staat hij als xhr. · Kijken wat de browser doet
Server: FastAPI zoekt het endpoint. Voor je endpoint is er geen verschil met een verzoek zonder htmx. · Je eerste endpoint
Server: Jouw Python draait. Leest de tijd, of slaat een bericht op. Ook dit verzoek komt van de bezoeker, dus controleer hier. · Een 404 sturen: als het item niet bestaat
Server: Het antwoord is een stukje HTML. Eén zin in een HTMLResponse, of een template zonder <html> eromheen. Geen omleiding: de browser is nooit weggegaan. · htmx-recepten
Browser: htmx zet het stukje op zijn plek. In het element van hx-target. De rest van de pagina blijft staan, de adresbalk ook. · Zonder herladen met htmx
Vergelijk stap 5 en 6 met stap 5 en 6 van het formulier zonder htmx. Daar was het antwoord een omleiding en begon de browser opnieuw met een GET, de hele pagina over de lijn. Hier is het antwoord een stukje HTML en blijft de pagina staan. Het post/redirect/get-patroon uit Doorsturen na opslaan (redirect) is niet nodig, want de browser heeft nooit een pagina verlaten.
Stap 3 en 4 zijn dezelfde als altijd. Ook een verzoek van htmx komt van de bezoeker, dus een controle, zoals de 404 uit Een 404 sturen: als het item niet bestaat, hoort nog steeds in stap 4, in je Python. Waarom een controle in de HTML niet genoeg is, zie je in de volgende uitbreiding, bij Server of browser?.