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

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

이 버튼을 누르면 어떠한 HTML이 GET /data 를 통해서 return 된다.

반환된 HTML은 #data selector를 통해 <div id=”data”></div>

안에 위치하게 된다.

Astro를 사용한 예시

<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>

src/pages/data.astro를 생성하고

안에

---
export const partial = true
---

<p>test response</p>

Load fresh data를 누르면 button이 #data 안에

<p> test response </p> 를 넣어준다!

Untitled