Latihan 1: Headers HTMX — HTMX

Latihan 1 dari materi Headers HTMX di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya <button hx-target="#result">Load with Headers</button> dan <div id="result">. Biarkan hx-target dan #result, lalu di tombol yang sama:

Tambahkan hx-get="/api/data".
Tambahkan hx-headers='{"X-Custom": "my-value"}': JSON dengan kutip satu di luar dan kutip dua di dalam. Request-nya membawa header X-Custom: my-value.

Yang dicek:

<button> punya hx-get persis /api/data.
hx-headers di <button> berisi JSON berkutip dua dengan "X-Custom" dan "my-value".
Kodenya memuat hx-headers dan hx-get di luar komentar.

JSON yang salah kutip membuat htmx berhenti dan request-nya gak dikirim, jadi kutip dua di dalamnya ikut dinilai. Di pratinjau, klik mengirim GET /api/data dengan header itu, lalu dijawab 404 karena belum ada contoh balasan.

Hint

Header tambahan ditempelkan ke request lewat atributnya sendiri, ditulis sebagai JSON. Tombolnya juga butuh alamat yang diminta.
Bungkus nilai atributnya dengan kutip satu, karena di dalam JSON nama dan nilai header wajib memakai kutip dua: '{"Nama": "nilai"}'.
<button hx-get="/api/data" hx-headers='{"X-Custom": "my-value"}' hx-target="#result">Load with Headers</button>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Headers HTMX — HTMX

Hint

Memperbarui Aplikasi