JavaScript Academy · Lektion

POST und Daten senden

Senden Sie JSON-Payloads mit Anfrageoptionen.

POST und Daten senden ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Daten an einen Server senden

Um Daten zu erstellen oder zu aktualisieren, senden Sie eine Anfrage mit einem Body. Fetch unterstützt dies über das Optionsobjekt, das als zweites Argument übergeben wird.

Die Methode festlegen

Setzen Sie method auf das benötigte HTTP-Verb: POST zum Erstellen, PUT/PATCH zum Aktualisieren und DELETE zum Entfernen.

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

Einen JSON-Body hinzufügen

Die meisten APIs erwarten JSON. Wandeln Sie Ihr Objekt mit JSON.stringify in eine Zeichenfolge um und legen Sie diese in body ab.

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

Der Content-Type-Header

Geben Sie dem Server mit Content-Type: application/json an, dass der Body JSON enthält. Ohne diese Angabe interpretiert der Server die Nutzlast möglicherweise falsch.

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

Die Response auslesen

Der Server antwortet normalerweise mit der erstellten Ressource. Lesen Sie sie wie bei einem GET mit response.json() aus.

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

Eine vollständige Erstellungsfunktion

Fassen Sie das Muster in einer wiederverwendbaren Funktion zusammen. Sie nimmt Daten entgegen, sendet sie und gibt die Serverantwort zurück.

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

Verwenden Sie PUT, um eine Ressource vollständig zu ersetzen, und PATCH, um nur einige Felder zu aktualisieren. Die Form des Bodys unterscheidet sich entsprechend.

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

Formulardaten senden

Verwenden Sie für Datei-Uploads oder das Absenden von Formularen ein FormData-Objekt als Body. Setzen Sie Content-Type NICHT selbst; der Browser fügt die korrekte Multipart-Grenze hinzu.

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

Authentifizierung

Geschützte Endpunkte benötigen Anmeldedaten. Senden Sie ein Token im Authorization-Header zusammen mit Content-Type.

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

Cookies und Anmeldedaten

Standardmäßig sendet fetch bei Cross-Origin-Anfragen keine Cookies. Setzen Sie credentials: "include", wenn der Server sitzungsbasierte Cookies verwendet.

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

Stolperfallen beim Stringifizieren

Denken Sie daran: body muss eine Zeichenkette (oder FormData/Blob) sein. Wenn Sie ein rohes Objekt übergeben, wird [object Object] gesendet. Verwenden Sie für Objekte immer zuerst JSON.stringify.

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

Kurzer Test

JSON mit POST senden.

Zusammenfassung

Senden Sie Daten, indem Sie method, einen body und Header festlegen. Für JSON stringifizieren Sie das Objekt mit JSON.stringify und setzen Content-Type: application/json. Verwenden Sie FormData für Uploads (Content-Type nicht manuell setzen), fügen Sie zur Authentifizierung Authorization hinzu und verwenden Sie für Cookies credentials: "include". Lesen Sie die Antwort mit response.json().

Häufig gestellte Fragen

Ist die Lektion „POST und Daten senden“ kostenlos?

Ja — der vollständige Text von „POST und Daten senden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „POST und Daten senden“?

Senden Sie JSON-Payloads mit Anfrageoptionen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „POST und Daten senden“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy