JavaScript Academy · درس

POST وإرسال البيانات

أرسلوا حمولات JSON مع خيارات الطلب.

POST وإرسال البيانات درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

إرسال البيانات إلى خادم

لإنشاء البيانات أو تحديثها، أرسل طلبًا يحتوي على نص أساسي. يدعم Fetch ذلك من خلال كائن الخيارات الذي تمرره كوسيط ثانٍ.

ضبط الطريقة

عيّن method إلى فعل HTTP الذي تحتاج إليه: استخدم POST للإنشاء، وPUT/PATCH للتحديث، وDELETE للإزالة.

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

إضافة نص أساسي بصيغة JSON

تتوقع معظم واجهات API بيانات JSON. حوّل الكائن إلى سلسلة باستخدام JSON.stringify، ثم ضعه في body.

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

ترويسة Content-Type

أخبر الخادم بأن النص الأساسي بصيغة JSON عبر ضبط Content-Type: application/json. ومن دونها، قد يسيء الخادم تفسير الحمولة.

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

قراءة الاستجابة

يرد الخادم عادةً بالمورد الذي أُنشئ. اقرأه بالطريقة نفسها المستخدمة مع GET، باستخدام response.json().

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

دالة إنشاء مكتملة

اجمع النمط في دالة قابلة لإعادة الاستخدام. فهي تقبل البيانات وترسلها وتعيد استجابة الخادم.

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

استخدم PUT لاستبدال مورد بالكامل، وPATCH لتحديث بعض الحقول فقط. ويختلف شكل الجسم تبعًا لذلك.

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

إرسال بيانات النموذج

لرفع الملفات أو إرسال النماذج، استخدم كائن FormData بوصفه جسم الطلب. لا تضبط Content-Type بنفسك؛ يضيف المتصفح الحدّ الفاصل الصحيح لـ multipart.

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

المصادقة

تحتاج نقاط النهاية المحمية إلى بيانات اعتماد. أرسل رمزًا مميزًا في ترويسة Authorization إلى جانب Content-Type.

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

ملفات تعريف الارتباط وبيانات الاعتماد

لا يرسل fetch ملفات تعريف الارتباط عبر الأصول المختلفة افتراضيًا. اضبط credentials: "include" عندما يستخدم الخادم جلسات تعتمد على ملفات تعريف الارتباط.

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

مزالق التحويل إلى سلسلة

تذكّر: يجب أن يكون body سلسلة نصية (أو FormData/Blob). يؤدي تمرير كائن خام إلى إرسال [object Object]. احرص دائمًا على تطبيق JSON.stringify على الكائنات أولًا.

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

اختبار سريع

إرسال JSON باستخدام POST.

مراجعة

أرسل البيانات من خلال ضبط method وbody والترويسات. بالنسبة إلى JSON، طبّق JSON.stringify على الكائن واضبط Content-Type: application/json. استخدم FormData لرفع الملفات (من دون ضبط Content-Type يدويًا)، وأضف Authorization للمصادقة، وcredentials: "include" لملفات تعريف الارتباط. اقرأ الرد باستخدام response.json().

الأسئلة الشائعة

هل درس «POST وإرسال البيانات» مجاني؟

نعم — نص درس «POST وإرسال البيانات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «POST وإرسال البيانات»؟

أرسلوا حمولات JSON مع خيارات الطلب. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «POST وإرسال البيانات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy