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