htmx: Doing a GET request

Consider this button:

<button hx-get="/data" 
  Load fresh data

<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'>
    <script src=''></script>
      Load fresh data

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

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