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
Want to learn more? Check out our courses