0Pricing
JavaScript Academy · Ders

POST ve Veri Gönderme

İstek seçenekleriyle JSON yükleri gönderin.

POST ve Veri Gönderme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Sunucuya Veri Gönderme

Veri oluşturmak veya güncellemek için gövdeli bir istek gönderirsiniz. Fetch bunu, ikinci bağımsız değişken olarak geçirilen seçenekler nesnesi aracılığıyla destekler.

Yöntemi Ayarlama

method değerini gereken HTTP yöntemine ayarlayın: oluşturmak için POST, güncellemek için PUT/PATCH, kaldırmak için DELETE.

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

JSON Gövdesi Ekleme

Çoğu API JSON bekler. Nesnenizi JSON.stringify ile dizeye dönüştürüp body içine yerleştirin.

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

İçerik Türü Üst Bilgisi

Content-Type: application/json ayarlayarak sunucuya gövdenin JSON olduğunu bildirin. Bu bilgi olmadan sunucu yükü yanlış yorumlayabilir.

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

Yanıtı Okuma

Sunucu genellikle oluşturulan kaynağı döndürür. Bunu bir GET isteğinde olduğu gibi response.json() ile okuyun.

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

Eksiksiz Oluşturma İşlevi

Kalıbı yeniden kullanılabilir bir işlev içinde toplayın. Bu işlev verileri kabul eder, gönderir ve sunucu yanıtını döndürür.

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

Bir kaynağı bütünüyle değiştirmek için PUT, yalnızca bazı alanları güncellemek için PATCH kullanın. Buna bağlı olarak gövdenin biçimi de farklılık gösterir.

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

Form Verisi Gönderme

Dosya yüklemeleri veya form gönderimleri için gövde olarak bir FormData nesnesi kullanın. Content-Type'ı kendiniz ayarlamayın; tarayıcı doğru çok parçalı sınırı ekler.

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

Kimlik Doğrulama

Korumalı uç noktalar kimlik bilgileri gerektirir. Content-Type ile birlikte Authorization başlığında bir belirteç gönderin.

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

Çerezler ve Kimlik Bilgileri

Varsayılan olarak fetch, farklı kaynaklar arasında çerez göndermez. Sunucu çerez tabanlı oturumlar kullanıyorsa credentials: "include" ayarlayın.

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

stringify Tuzakları

Unutmayın: body bir dize (veya FormData/Blob) olmalıdır. Ham bir nesne aktarmak [object Object] gönderir. Nesneler üzerinde her zaman önce JSON.stringify kullanın.

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

Hızlı Kontrol

POST ile JSON gönderme.

Özet

method, bir body ve başlıklar ayarlayarak veri gönderin. JSON için nesne üzerinde JSON.stringify kullanın ve Content-Type: application/json ayarlayın. Yüklemeler için FormData kullanın (Content-Type'ı kendiniz ayarlamayın), kimlik doğrulama için Authorization ekleyin ve çerezler için credentials: "include" kullanın. Yanıtı response.json() ile okuyun.

Sıkça Sorulan Sorular

“POST ve Veri Gönderme” dersi ücretsiz mi?

Evet — “POST ve Veri Gönderme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“POST ve Veri Gönderme” dersinde ne öğreneceğim?

İstek seçenekleriyle JSON yükleri gönderin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“POST ve Veri Gönderme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. GET İstekleri Oluşturma
  2. POST ve Veri Gönderme
  3. Hataları ve Durum Kodlarını Yönetme
  4. AbortController ile İstekleri İptal Etme
← JavaScript Academy Sayfasına Dön