</> htmx post json

ต่อจากคราวที่แล้วที่เราพาไปทำความรู้จัก htmx แบบเร็วๆ มาคราวนี้จะพามาดูวิธีส่ง json request ไปให้ API ซึ่ง htmx อย่างเดียวจะไม่เพียงพอต่อการทำงานนี้ละ เราเลยจะต้องใช้ตัวช่วย โดย htmx จะเตรียมบรรดาเหล่า extensions ไว้ให้เราใช้อยู่ด้วย ไปดูได้จาก link นี้

โดยตัวที่เราจะหยิบมาใช้ตอนนี้ก็คือ json-enc โดยหน้าที่ของมันก็คือ เวลาเราต้องการจะยิง request ไปหา API สักตัว โดยจะส่งข้อมูลไปให้อยู่ในรูปแบบของ json เราก็จะใช้วิธีสร้าง form ขึ้นมาชุดหนึ่ง เวลาที่เราใช้ json-enc มันจะทำการ serialize ของใน form ไปอยู่ในรูปแบบของ json ให้เอง เรามาดูวิธีทำกันเลย

index.html

<script src="https://unpkg.com/htmx.org@2.0.3"></script>
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/json-enc.js"></script>

<form hx-post="/api" hx-swap="innerHTML" hx-target="#content" hx-ext="json-enc">
    <div><textarea placeholder="Leave a comment here" name="message" id="message"></textarea></div>
    <div><input type="text" name="name" id="name" placeholder="name" required></div>
    <button type="submit">Submit</button>
</form>

<div id="content">replace here</div> 

นี่คือในส่วนของ html ซึ่งจะสามารถส่ง request ไปให้ api ได้แล้ว ต่อมาเราจะมาเขียน API แบบง่ายสุดๆด้วย Go ตามนี่ครับ

package main

import (
    "fmt"
    "io"
    "log"
    "net/http"
)

func main() {
    fs := http.FileServer(http.Dir("./"))
    http.Handle("/", fs)

    http.HandleFunc("/api", func(w http.ResponseWriter, r *http.Request) {
        b, err := io.ReadAll(r.Body)
        if err != nil {
            log.Fatal(err)
        }
        r.Body.Close()

        fmt.Println(string(b))
    })

    http.ListenAndServe(":8910", nil)
}

เมื่อเขียนเสร็จ เราจะรันมันด้วยกันผ่าน go ด้วยคำสั่งนี้ครับ

go run main.go

ทีนี้เราจะไปเปิดหน้า web ผ่าน url ใหม่ http://localhost:8910/

พอเราทดลองกด submit แล้วไปดูที่ console ที่เรารัน go run main.go เอาไว้ เราก็จะเห็น log ที่มีหน้าตาแบบนี้

{"message":"sss","name":"ddd"}

สิ่งที่ต้องไม่ลืมคือการนำ extension เข้ามาใช้ ตามตัวอย่างเราใช้ CDN ใน script
ถ้าเราลืม extension สิ่งที่เราจะได้ก็จะกลายเป็น request ลักษณะแบบ form แทนแบบนี้

message=sss&name=ddd

จากตัวอย่างข้างต้นนี้ เราก็จะสามารถใช้ htmx ทำการส่ง request ในรูปแบบ json ได้แล้ว