0Pricing
TypeScript Academy · Pelajaran

Bekerja dengan FormData, URL, URLSearchParams

Kumpulkan input formulir dengan FormData, uraikan dan buat URL dengan aman, serta ubah parameter kueri dengan URLSearchParams.

Bekerja dengan FormData, URL, URLSearchParams adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 3 pelajaran total.

Pendahuluan

Tujuan: Bekerja dengan API data browser: FormData, URL, dan URLSearchParams.

  • Kumpulkan nilai formulir
  • Bangun dan uraikan URL
  • Kelola parameter kueri

Dasar-dasar FormData

FormData mengumpulkan masukan berdasarkan nama. Iterasi entries() menghasilkan pasangan [name, value] sebagai string atau objek File.

const form = document.querySelector("form#login");
if (form) {
  const fd = new FormData(form);
  for (const [key, val] of fd.entries()) {
    console.log(key, val);
  }
}

Penambahan FormData

Anda dapat membuat FormData secara manual dengan append, termasuk objek Blob/File untuk unggahan.

const fd = new FormData();
fd.append("username", "alice");
fd.append("file", new Blob(["hi"]), "greet.txt");

for (const [k,v] of fd.entries()) {
  console.log(k, v);
}

Bagian-bagian URL

URL menguraikan string menjadi beberapa bagian (hostname, pathname, search, hash). Cara ini lebih aman daripada memisahkan string secara manual.

const url = new URL("https://example.com/page?x=1");
console.log(url.hostname); // example.com
console.log(url.pathname); // /page

Pengambilan URLSearchParams

URLSearchParams memungkinkan Anda membaca/menulis parameter kueri dengan mudah. get() mengembalikan string | null.

const params = new URLSearchParams("?q=go&type=video");
console.log(params.get("q")); // go
console.log(params.get("missing")); // null

Pembaruan params

Perbarui params dengan set, tambahkan dengan append, dan hapus dengan delete. Gunakan toString() untuk melakukan serialisasi.

const params = new URLSearchParams();
params.set("page", "1");
params.set("q", "typescript");
console.log(params.toString()); // page=1&q=typescript

Pemeriksaan pengambilan params

Pemeriksaan singkat: Apa yang dikembalikan oleh URLSearchParams.get("key") jika tidak ditemukan?

Rangkuman

Rangkuman: FormData mengumpulkan masukan berupa nama/nilai. URL mengurai dengan aman. URLSearchParams mengelola params kueri.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Bekerja dengan FormData, URL, URLSearchParams” gratis?

Ya — teks lengkap “Bekerja dengan FormData, URL, URLSearchParams” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Bekerja dengan FormData, URL, URLSearchParams”?

Kumpulkan input formulir dengan FormData, uraikan dan buat URL dengan aman, serta ubah parameter kueri dengan URLSearchParams. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.

Berapa lama pelajaran “Bekerja dengan FormData, URL, URLSearchParams” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Tipe DOM dari lib & querySelector (pemeriksaan null ketat)
  2. Tipe peristiwa, peristiwa khusus; penyempitan subtipe HTMLElement
  3. Bekerja dengan FormData, URL, URLSearchParams
← Kembali ke TypeScript Academy