คราวนี้เราจะลองมาดูวิธีการรับ 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 มาแสดงผลตามที่เราต้องการได้แล้วครับ
Top comments (0)