POST e invio dei dati
Invii payload JSON con le opzioni della richiesta.
POST e invio dei dati è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Inviare dati a un server
Per creare o aggiornare dati, invii una richiesta con un corpo. Fetch supporta questa operazione tramite l'oggetto di opzioni passato come secondo argomento.
Impostare il metodo
Imposti method sul verbo HTTP necessario: POST per creare, PUT/PATCH per aggiornare, DELETE per rimuovere.
fetch(url, { method: "POST" });Aggiungere un corpo JSON
La maggior parte delle API si aspetta JSON. Serializzi l'oggetto con JSON.stringify e lo inserisca in body.
fetch(url, {
method: "POST",
body: JSON.stringify({ name: "Ada", age: 36 })
});L'header Content-Type
Indichi al server che il corpo è JSON impostando Content-Type: application/json. Senza questa indicazione, il server potrebbe interpretare erroneamente il payload.
fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Ada" })
});Leggere la risposta
Il server risponde solitamente con la risorsa creata. La legga come per una GET, usando response.json().
const response = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
const created = await response.json();Una funzione completa per la creazione
Raggruppi lo schema in una funzione riutilizzabile. Accetta i dati, li invia e restituisce la risposta del server.
async function createUser(data) {
const res = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
return res.json();
}PUT e PATCH
Utilizzi PUT per sostituire completamente una risorsa e PATCH per aggiornare solo alcuni campi. Di conseguenza, anche la struttura del corpo della richiesta è diversa.
fetch("/api/users/7", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ age: 37 })
});Invio dei dati del modulo
Per caricare file o inviare moduli, utilizzi un oggetto FormData come corpo della richiesta. NON imposti personalmente Content-Type: il browser aggiunge il delimitatore multipart corretto.
const form = new FormData();
form.append("avatar", fileInput.files[0]);
fetch("/upload", { method: "POST", body: form });Autenticazione
Gli endpoint protetti richiedono credenziali. Invii un token nell'header Authorization, insieme a Content-Type.
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + token
},
body: JSON.stringify(data)
});Cookie e credenziali
Per impostazione predefinita, fetch non invia cookie tra origini diverse. Imposti credentials: "include" quando il server utilizza sessioni basate sui cookie.
fetch(url, { method: "POST", credentials: "include", body: payload });Problemi con la serializzazione
Ricordi: body deve essere una stringa (oppure un oggetto FormData o Blob). Passare un oggetto grezzo invia [object Object]. Prima trasformi sempre gli oggetti con JSON.stringify.
body: JSON.stringify({ ok: true }) // correct
// body: { ok: true } <-- brokenVerifica rapida
Invio di JSON con POST.
Riepilogo
Invii i dati impostando method, un body e gli header. Per JSON, trasformi l'oggetto con JSON.stringify e imposti Content-Type: application/json. Utilizzi FormData per i caricamenti (senza impostare manualmente Content-Type), aggiunga Authorization per l'autenticazione e credentials: "include" per i cookie. Legga la risposta con response.json().
Domande Frequenti
La lezione «POST e invio dei dati» è gratuita?
Sì — il testo completo di «POST e invio dei dati» è 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «POST e invio dei dati»?
Invii payload JSON con le opzioni della richiesta. Eserciti JavaScript 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 JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript 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 2 di 4.
Quanto tempo richiede la lezione «POST e invio dei dati»?
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 JavaScript Academy?
Sì. Ogni lezione JavaScript 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
- Effettuare richieste GET
- POST e invio dei dati
- Gestire errori e codici di stato
- Interrompere le richieste con AbortController