0Pricing
TypeScript Academy · Lezione

Utilizzo di FormData, URL e URLSearchParams

Raccolga gli input dei moduli con FormData, analizzi e costruisca URL in sicurezza e manipoli i parametri di query con URLSearchParams.

Utilizzo di FormData, URL e URLSearchParams è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 3 lezioni in totale.

Introduzione

Obiettivo: lavorare con le API del browser per i dati: FormData, URL e URLSearchParams.

  • Raccogliere i valori dei moduli
  • Creare e analizzare gli URL
  • Gestire i parametri di query

Nozioni di base su FormData

FormData raccoglie gli input in base al nome. Iterando su entries() si ottengono coppie [name, value] sotto forma di stringhe o oggetti 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);
  }
}

Aggiungere elementi a FormData

È possibile creare manualmente un oggetto FormData con append, inclusi oggetti Blob/File per i caricamenti.

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);
}

Parti di un URL

URL analizza una stringa suddividendola in parti (hostname, pathname, search, hash). È più sicuro che dividere manualmente la stringa.

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

Recuperare valori con URLSearchParams

URLSearchParams consente di leggere e scrivere facilmente i parametri di query. get() restituisce string | null.

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

Aggiornamento dei parametri

Aggiornate i parametri con set, aggiungeteli con append e rimuoveteli con delete. Usate toString() per serializzarli.

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

Verifica del recupero dei parametri

Verifica rapida: che cosa restituisce URLSearchParams.get("key") quando il parametro non è presente?

Riepilogo

Riepilogo: FormData raccoglie i nomi e i valori degli input. URL analizza gli URL in modo sicuro. URLSearchParams gestisce i parametri di query.

Domande Frequenti

La lezione «Utilizzo di FormData, URL e URLSearchParams» è gratuita?

Sì — il testo completo di «Utilizzo di FormData, URL e URLSearchParams» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 3 lezioni in totale.

Cosa imparerò in «Utilizzo di FormData, URL e URLSearchParams»?

Raccolga gli input dei moduli con FormData, analizzi e costruisca URL in sicurezza e manipoli i parametri di query con URLSearchParams. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.

Quanto tempo richiede la lezione «Utilizzo di FormData, URL e URLSearchParams»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Tipi lib DOM e querySelector (controlli strict null)
  2. Tipi degli eventi, eventi personalizzati; restrizione dei sottotipi HTMLElement
  3. Utilizzo di FormData, URL e URLSearchParams
← Torna a TypeScript Academy