htmx: Doing a GET request

Consider this button:

<button hx-get="/data" 
        hx-target="#data">
  Load fresh data
</button>

<div id="data"></div>

When you click the button, any HTML returned from the GET /data HTTP request will be put inside the element that matches the selector #data (in this example our <div id="data"></div>).

I’ll use Astro to show a simple example, create a page with

<html lang='en'>
  <head>
    <script src='https://unpkg.com/htmx.org@1'></script>
  </head>
  <body>
    <button 
      hx-get='/data' 
      hx-target='#data'>
      Load fresh data
    </button>

    <div id='data'></div>
  </body>
</html>

Now create a src/pages/data.astro and in there add

---
export const partial = true
---

<p>test response</p>

Clicking the Load fresh data button will insert <p>test response</p> into the #data div.

Note that all is happening without us having to write a single line of JavaScript.

htmx does all the JavaScript for us. We just describe what we want it to do. And it’s pretty flexible, so we can do a lot with it.

Lessons in this unit:

0:	Introduction
1:	Why htmx
2:	The core idea of htmx
3:	Installing htmx
4:	▶︎ Doing a GET request
5:	Swap
6:	POST request
7:	Targets
8:	Loading indicator
9:	Confirming actions, and prompts
10:	Triggers
11:	Request headers
12:	Response headers
13:	Events

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!