htmx + hono

概要:

htmx + hono 使うメモになります。

• デプロイは、CF-pagesの例です。

[ 作成日: 2024/07/27 ]

---

環境

• htmx
• hono : 4.5.2
• CF-pages

---

作成したコード

• https://github.com/kuc-arc-f/hono_63htmx

https://github.com/kuc-arc-f/hono_63htmx

---

• src/pages/Htmx1.tsx

https://github.com/kuc-arc-f/hono_63htmx/blob/main/src/pages/Htmx1.tsx

---

• hx-get: GET通信の例

<button
  hx-get="https://jsonplaceholder.typicode.com/users/1"
  hx-target="#h2"
>
  Click
</button>
<h3 id="h2">ここに表示</h3>

---

• src/pages/Htmx2.tsx
• hx-post : POST通信
• hx-target: 受信値をレンダリング
• hx-on--after-request: POST受信後、実行される。JS関数

    <form
    hx-post="/api/test/test"
    hx-trigger="submit"
    hx-target="#h2"
    hx-on--before-request=""
    hx-on--after-request="alert("OK, post send")"
    >
      <input type="text" name="name" />
      <button type="submit">Test</button>
    </form>
    <hr />
    <h3 id="h2">ここに表示</h3>

---