Akademi JavaScript · Pelajaran

POST dan Penghantaran Data

Hantar muatan JSON dengan pilihan permintaan.

Pelajaran 2 daripada 413 langkah

POST dan Penghantaran Data ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Menghantar Data kepada Pelayan

Untuk mencipta atau mengemas kini data, Anda menghantar permintaan dengan isi. API pengambilan menyokongnya melalui objek pilihan yang dihantar sebagai hujah kedua.

Menetapkan Kaedah

Tetapkan method kepada kata kerja HTTP yang diperlukan: POST untuk mencipta, PUT/PATCH untuk mengemas kini dan DELETE untuk mengalih keluar.

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

Menambah Isi JSON

Kebanyakan API menjangkakan JSON. Tukarkan objek Anda kepada rentetan dengan JSON.stringify dan letakkannya dalam body.

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

Pengepala Content-Type

Beritahu pelayan bahawa isi itu ialah JSON dengan menetapkan Content-Type: application/json. Tanpanya, pelayan mungkin tersalah tafsir muatan tersebut.

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

Membaca Respons

Pelayan biasanya membalas dengan sumber yang telah dicipta. Baca sumber itu dengan cara yang sama seperti GET, menggunakan response.json().

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

Fungsi Lengkap untuk Mencipta

Gabungkan pola ini ke dalam fungsi yang boleh digunakan semula. Fungsi itu menerima data, menghantarnya dan mengembalikan respons pelayan.

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

Gunakan PUT untuk menggantikan sumber sepenuhnya dan PATCH untuk mengemas kini beberapa medan sahaja. Bentuk kandungan berbeza mengikut keadaan.

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

Menghantar Data Borang

Untuk muat naik fail atau penghantaran borang, gunakan objek FormData sebagai kandungan. Jangan tetapkan Content-Type sendiri; pelayar akan menambah sempadan berbilang bahagian yang betul.

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

Pengesahan

Titik akhir yang dilindungi memerlukan kelayakan. Hantar token dalam pengepala Authorization bersama-sama dengan Content-Type.

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

Kuki dan Kelayakan

Secara lalai, fetch tidak menghantar kuki merentas asal. Tetapkan credentials: "include" apabila pelayan menggunakan sesi berasaskan kuki.

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

Perangkap Stringify

Ingat: body mestilah rentetan (atau FormData/Blob). Menghantar objek raw akan menghantar [object Object]. Sentiasa gunakan JSON.stringify pada objek terlebih dahulu.

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

Semakan Pantas

Menghantar JSON dengan POST.

Jawab dalam pelajaran interaktif

Ringkasan

Hantar data dengan menetapkan method, body dan pengepala. Untuk JSON, gunakan JSON.stringify pada objek dan tetapkan Content-Type: application/json. Gunakan FormData untuk muat naik (jangan tetapkan Content-Type secara manual), tambahkan Authorization untuk pengesahan dan credentials: "include" untuk kuki. Baca jawapan dengan response.json().

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “POST dan Penghantaran Data” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “POST dan Penghantaran Data”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “POST dan Penghantaran Data”?

Hantar muatan JSON dengan pilihan permintaan. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “POST dan Penghantaran Data” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Membuat Permintaan GET
POST dan Penghantaran Data
Mengendalikan Error dan Kod Status
Membatalkan Permintaan dengan AbortController

← Kembali ke Akademi JavaScript