</> htmx handle json response
Pallat Anchaleechamaikorn
Posted on October 15, 2024
คราวนี้เราจะลองมาดูวิธีการรับ json response ที่เราได้รับมาจาก API เพื่อมาแสดงผลที่หน้าจอเราแบบง่ายๆกันดู โดยเราจะนำโค้ดจากครั้งที่แล้วมาเติมของให้ดูแบบนี้
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>
<script src="https://unpkg.com/htmx-ext-client-side-templates@2.0.0/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>
<div hx-ext="client-side-templates">
<form hx-post="/api" hx-swap="innerHTML" hx-target="#content" hx-ext="json-enc" mustache-template="mytemplate">
<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>
<template id="mytemplate">
<p> {{message}} {{name}}</p>
</template>
</div>
จากนั้นไปดู API แบบง่ายๆเพื่อทำการทดสอบกัน
main.go
package main
import (
"encoding/json"
"io"
"log"
"net/http"
)
func main() {
fs := http.FileServer(http.Dir("./"))
http.Handle("/", fs)
http.HandleFunc("/api", func(w http.ResponseWriter, r *http.Request) {
_, err := io.ReadAll(r.Body)
if err != nil {
log.Fatal(err)
}
r.Body.Close()
json.NewEncoder(w).Encode(map[string]string{
"message": "test message",
"name": "test name",
})
})
http.ListenAndServe(":8910", nil)
}
หน้าที่ของ API มีเพียงการรับ request เข้ามาแล้วตอบ json message ออกไปง่ายๆ โดยหน้าตาของ response จะเป็นแบบนี้
{
"message": "test message",
"name": "test name"
}
ทีนี้เรามาดูตอนรับไปแสดงผล ก่อนอื่นเราต้อง include ตัว extension เข้ามาก่อน 2 ตัวนี้
<script src="https://unpkg.com/htmx-ext-client-side-templates@2.0.0/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>
จากนั้นให้ครอบตั้งแต่ form ไปจนถึง target id และ template ด้วย
<div hx-ext="client-side-templates">...</div>
เพื่อเป็นการบอกว่าเราต้องการจะ render ด้วย client-side-templates
ที่ form เราระบุ mustache-template="mytemplate"
เพื่อบอกว่า response ที่ได้ เราจะใช้ mustache-template เป็น template ในการแสดงผล
จากนั้นใน template เราสามารถระบุชื่อ field ที่ได้จาก response แบบนี้
{{message}}
หมายถึง field ที่ชื่อ message จาก response เลยเป็นต้น
เพียงเท่านี้เราก็สามารถนำ response date มาแสดงผลตามที่เราต้องการได้แล้วครับ
Posted on October 15, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 27, 2024