JavaScript Academy · Lektion

POST och att skicka data

Skicka JSON-payloads med alternativ för begäran.

Lektion 2 av 413 steg

POST och att skicka data är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Skicka data till en server

För att skapa eller uppdatera data skickar du en request med en body. Fetch stöder detta genom options-objektet som skickas som det andra argumentet.

Ange metoden

Ange method till den HTTP-metod du behöver: POST för att skapa, PUT/PATCH för att uppdatera och DELETE för att ta bort.

fetch(url, { method: "POST" });

Lägga till en JSON-body

De flesta API:er förväntar sig JSON. Konvertera objektet till en sträng med JSON.stringify och lägg det i body.

fetch(url, {
  method: "POST",
  body: JSON.stringify({ name: "Ada", age: 36 })
});

Headern Content-Type

Informera servern om att body innehåller JSON genom att ange Content-Type: application/json. Utan detta kan servern misstolka payloaden.

fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Ada" })
});

Läsa svaret

Servern svarar vanligtvis med den skapade resursen. Läs den på samma sätt som vid ett GET-anrop, med response.json().

const response = await fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(payload)
});
const created = await response.json();

En komplett skapa-funktion

Kapsla in mönstret i en återanvändbar funktion. Den tar emot data, skickar den och returnerar serversvaret.

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 och PATCH

Använd PUT för att ersätta en resurs helt och PATCH för att bara uppdatera vissa fält. Strukturen på body skiljer sig därför åt.

fetch("/api/users/7", {
  method: "PATCH",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ age: 37 })
});

Skicka formulärdata

Använd ett FormData-objekt som body vid filuppladdningar eller formulärinskick. Ange INTE Content-Type själv; webbläsaren lägger till rätt multipart-avgränsare.

const form = new FormData();
form.append("avatar", fileInput.files[0]);
fetch("/upload", { method: "POST", body: form });

Autentisering

Skyddade endpoints behöver autentiseringsuppgifter. Skicka en token i headern Authorization tillsammans med Content-Type.

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + token
  },
  body: JSON.stringify(data)
});

Cookies och autentiseringsuppgifter

Som standard skickar fetch inte cookies mellan olika origin. Ange credentials: "include" när servern använder sessionshantering med cookies.

fetch(url, { method: "POST", credentials: "include", body: payload });

Fallgropar med strängkonvertering

Kom ihåg: body måste vara en sträng (eller FormData/Blob). Om ett rått objekt skickas blir resultatet [object Object]. Använd alltid JSON.stringify på objekt först.

body: JSON.stringify({ ok: true }) // correct
// body: { ok: true }  <-- broken

Snabbkontroll

Skicka JSON med POST.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Skicka data genom att ange method, en body och headers. För JSON använder du JSON.stringify på objektet och anger Content-Type: application/json. Använd FormData vid uppladdningar (ange inte Content-Type manuellt), lägg till Authorization för autentisering och credentials: "include" för cookies. Läs svaret med response.json().

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”POST och att skicka data” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”POST och att skicka data”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”POST och att skicka data”?

Skicka JSON-payloads med alternativ för begäran. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”POST och att skicka data”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy