htmx で、レスポンスjsonをパース後 次の処理分岐する

概要:

• 前scrapの続編で、 htmx + astroの関連メモとなります。
• post 受信後の、エラー分岐方法など検討した内容になります。
• htmx機能(hx-xxx 属性)　に、JS処理を追加して。機能を拡張する例です。

[ 作成日: 2024/07/11 ]

---

環境

• htmx
• astro 4.11
• vercel

---

• 前実装した、ログインAPIからのレスポンスjsonを、エラー処理

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/example/simple_auth/src/pages/login.astro

---

• hx-post: post送信
• hx-target: レスポンスデータ
• hx-on: post受信後のJS実行

    <form
    hx-post="/api/auth/user_login"
    hx-trigger="submit"
    hx-target="#resulte_form1"
    hx-on="htmx:afterRequest: Login.afterPostForm1()"
    >
      <h1 class="text-4xl font-bold my-2">Login!</h1>
      <hr class="my-1" />
      <label class="text-2xl font-bold my-2">Email:</label>
      <input type="text" id="email" name="email"
      class="input_text" /> 
      <hr class="my-2" />
      <label class="text-2xl font-bold my-2">Password:</label>
      <input type="text" id="password" name="password"
      class="input_text" /> 
      <hr class="my-2" />   
      <button type="submit" class="btn-purple" >Login
      </button>
    </form>
    <div id="resulte_form1" class="d-none">ここに表示</div>

---

• post受信後の、id=resulte_form1 の、htmlにjsonが設定され。

<div id="resulte_form1" class="d-none" data-astro-cid-sgpqyurt="">{"ret":false,"resulte_code":400,"data":{},"appName":"astro4_2"}</div>

---

• POST受信後の処理、afterPostForm1

https://github.com/kuc-arc-f/astro4_2htmx/blob/main/example/simple_auth/public/js/Login.js

---

• id指定、innerHTMLでJSON取得
• resulte_codeで、分岐
• 分岐処理内で、エラー処理、次処理実行。

      const resulte_form1 = document.querySelector("#resulte_form1");
      if(!resulte_form1){
        return;
      }
      const htm = resulte_form1.innerHTML;
      const obj = JSON.parse(htm);
      console.log(obj);
      if(obj.resulte_code) {
        console.log("resulte_code=", obj.resulte_code);
        if(obj.resulte_code === 200) {
          //TODO
          // alert("Success, Login");
        }else{
          alert("Error, Login");
        }
      }