توجيهات 2026: كيفية استرداد بيانات JSON من نوع POST

هل تمنيت يومًا استرجاع بيانات JSON بعد الإرسال من أي واجهة برمجة تطبيقات؟ إذا كانت الإجابة نعم، فأنت محظوظ. في هذه المقالة، سنركز على كيفية استرجاع بيانات JSON بعد الإرسال من أي واجهة برمجة تطبيقات. نعني ببيانات JSON بعد الإرسال البيانات التي يتم إرسالها في جسم طلب POST.

تُعتبر هذه طريقة شائعة لإرسال البيانات إلى واجهة برمجة التطبيقات، خصوصًا عند رغبتك في إنشاء أو تحديث مورد. ثم سنوضح لك كيفية استخدام أداة بسيطة وفعالة تُدعى Apidog للقيام بذلك.

ما هي واجهة Fetch API؟

في سياق JavaScript، Fetch هي واجهة برمجة تطبيقات حديثة لإجراء طلبات HTTP. إنها توفر واجهة أكثر بساطة وبديهية من الكائن الأقدم XMLHttpRequest ، وهي أسهل في الاستخدام.

ماذا تفعل طلبات Fetch؟

تُستخدم واجهة Fetch API لإجراء الطلبات إلى الخوادم واستلام الاستجابات بتنسيق مثل JSON، XML، أو HTML.

إليك مثال على كيفية استخدام واجهة Fetch API لإرسال بيانات JSON:

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key: 'value'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

في هذا المثال، نقوم بإرسال طلب POST إلى https://example.com/api/data مع تحميل JSON يحتوي على زوج مفتاح-قيمة واحد. يتم تعيين رأس Content-Type إلى application/json للإشارة إلى أن الحمولة بتنسيق JSON. يتم استخدام طريقة JSON.stringify() لتحويل كائن JSON إلى سلسلة قبل إرساله في جسم الطلب.

ترجع طريقة fetch() وعدًا يحل إلى كائن الاستجابة الذي يمثل رد الطلب. يمكننا بعد ذلك استخدام طريقة json() من كائن الاستجابة لاستخراج بيانات JSON من الاستجابة. أخيرًا، نقوم بتسجيل بيانات JSON في وحدة التحكم.

ما هي البيانات التي يمكن إرسالها عبر طلب POST؟

في طلبات HTTP، يُستخدم أسلوب POST عادةً لإرسال البيانات إلى الخادم لإنشاء مورد جديد أو تحديث مورد موجود. يمكن إرسال البيانات بتنسيقات مختلفة عبر request body، ويعتمد اختيار نوع البيانات على متطلبات الخادم وطبيعة البيانات المرسلة.

إليك بعض أنواع البيانات الشائعة المستخدمة في طلبات POST:

بيانات النموذج:

• هذا هو أكثر نوع بيانات شيوعًا في نماذج الويب.
• تُشفر البيانات كسلسلة مشفرة برمز URL، مع أزواج مفتاح-قيمة مفصولة بـ = والأزواج مفصولة بـ &.
• مثال: name=John+Doe&email=john%40example.com
• تناسب كميات صغيرة من البيانات وأزواج المفتاح-القيمة البسيطة.

JSON (تدوين كائن JavaScript):

• JSON هو تنسيق تبادل بيانات خفيف يسهل على البشر قراءته وكتابته، ويسهل على الآلات تحليله وإنشاؤه.
• يستخدم على نطاق واسع في تطبيقات الويب الحديثة لنقل البيانات المهيكلة.
• عادةً ما تُرسل بيانات JSON مع تعيين رأس Content-Type إلى application/json.
• مثال: {"name": "John Doe", "email": "john@example.com"}
• تناسب الهياكل المعقدة للبيانات وواجهات برمجة التطبيقات.

XML (لغة ترميز ممتدة):

• XML هي لغة ترميز تستخدم لهيكلة البيانات.
• كانت تستخدم على نطاق واسع في الماضي لتبادل البيانات، لكن استخدامه انخفض لصالح JSON في السنوات الأخيرة.
• عادةً ما تُرسل بيانات XML مع تعيين رأس Content-Type إلى application/xml أو text/xml.
• مثال:

<user>
  <name>John Doe</name>
  <email>john@example.com</email>
</user>

• لا تزال تستخدم في بعض الأنظمة القديمة وبعض المجالات المحددة.

البيانات الثنائية:

• يمكن إرسال البيانات الثنائية، مثل الصور والفيديوهات أو الملفات الأخرى، في طلبات POST.
• عادةً ما يتم تشفير البيانات الثنائية باستخدام Base64 أو إرسالها كـ multipart/form-data.
• تناسب رفع الملفات أو إرسال محتوى ثنائي.

البيانات الخام:

• يمكن إرسال البيانات الخام في جسم الطلب دون أي تشفير أو هيكلة محددة.
• يجب تعيين رأس Content-Type بشكل مناسب، مثل text/plain للبيانات النصية العادية.
• تناسب إرسال تنسيقات بيانات مخصصة أو غير قياسية.

يعتمد اختيار نوع البيانات على متطلبات الخادم، وتعقيد البيانات المرسلة، وتفضيلات واجهة برمجة التطبيقات أو النظام الذي تعمل معه. أصبحت JSON هي المعيار الفعلي لواجهات برمجة التطبيقات الحديثة بسبب بساطتها، وقابليتها للقراءة، والدعم الواسع عبر لغات البرمجة والمنصات.

إرشادات: إرسال بيانات JSON باستخدام واجهة Fetch API

هناك العديد من الأسباب التي قد تجعلك ترغب في استرجاع بيانات JSON بعد الإرسال من أي واجهة برمجة تطبيقات. على سبيل المثال، قد ترغب في:

• اختبار واجهة برمجة تطبيقات تقوم بتطويرها أو استخدامها
• تعلم كيفية عمل واجهة برمجة التطبيقات وما البيانات التي تتوقعها وتعيدها
• تصحيح مشكلة أو خطأ مع واجهة برمجة التطبيقات
• استكشاف ميزات وقدرات واجهة برمجة التطبيقات
• دمج واجهة برمجة التطبيقات مع تطبيقك أو مشروعك الخاص

مهما كان السبب، فإن استرجاع بيانات JSON بعد الإرسال من أي واجهة برمجة تطبيقات يمكن أن يساعدك في تحقيق هدفك بشكل أسرع وأسهل. لا تحتاج إلى كتابة أي كود، أو تثبيت أي برنامج، أو إعداد أي بيئة. كل ما تحتاجه هو متصفح ويب واتصال بالإنترنت.

دليل خطوة بخطوة لاسترجاع بيانات JSON بعد الإرسال

الآن بعد أن أصبح لدينا فهم أساسي لواجهات برمجة التطبيقات وJSON وFetch، دعونا نتعمق في تفاصيل كيفية استرجاع بيانات JSON بعد الإرسال باستخدام API.

تُستخدم طريقة Fetch Post request JSON Data لإرسال كائن JSON كحمولة لطلب HTTP POST باستخدام واجهة Fetch API. هذه الطريقة مشابهة لطريقة إرسال كائن JSON مع طلب POST، لكن تستخدم واجهة Fetch API لإرسال الطلب بدلاً من كائن XMLHttpRequest. توفر واجهة Fetch API طريقة جديدة وأكثر حداثة لإجراء طلبات HTTP في JavaScript، وتوفر واجهة أكثر بساطة وبديهية من كائن XMLHttpRequest الأقدم. لاسترجاع بيانات JSON بعد الإرسال باستخدام API، تحتاج إلى اتباع هذه الخطوات:

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

في هذا المثال، نقوم بإرسال طلب POST إلى https://example.com/api/data مع تحميل JSON يحتوي على زوجي مفتاح-قيمة. يتم تعيين رأس Content-Type إلى application/json للإشارة إلى أن الحمولة بتنسيق JSON. يتم استخدام طريقة JSON.stringify() لتحويل كائن JSON إلى سلسلة قبل إرساله في جسم الطلب.

ترجع طريقة fetch() وعدًا يحل إلى كائن الاستجابة الذي يمثل رد الطلب. يمكننا بعد ذلك استخدام طريقة json() من كائن الاستجابة لاستخراج بيانات JSON من الاستجابة. أخيرًا، نقوم بتسجيل بيانات JSON في وحدة التحكم.

معالجة الأخطاء عند استخدام واجهة Fetch API

عند استخدام واجهة Fetch API، من المهم معالجة الأخطاء بشكل صحيح لضمان سلوك تطبيقك كما هو متوقع. إليك بعض الإرشادات العامة لمعالجة الأخطاء عند استخدام واجهة Fetch API:

1. استخدم طريقة catch() للتعامل مع أخطاء الشبكة وغيرها من الأخطاء التي قد تحدث أثناء الطلب.
2. تحقق من خاصية ok لكائن الاستجابة لتحديد ما إذا كان الطلب ناجحًا أم لا.
3. استخدم خاصية status لكائن الاستجابة لتحديد رمز الحالة HTTP للاستجابة.
4. استخدم طريقة json() لكائن الاستجابة لاستخراج بيانات JSON من الاستجابة.

إليك مثال على كيفية معالجة الأخطاء عند استخدام واجهة Fetch API:

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key: 'value'
  })
})
.then(response => {
  if (!response.ok) {
    throw new Error('لم تكن استجابة الشبكة جيدة');
  }
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));

في هذا المثال، نقوم بإرسال طلب POST إلى https://example.com/api/data مع تحميل JSON يحتوي على زوج مفتاح-قيمة واحد. يتم تعيين رأس Content-Type إلى application/json للإشارة إلى أن الحمولة بتنسيق JSON. يتم استخدام طريقة JSON.stringify() لتحويل كائن JSON إلى سلسلة قبل إرساله في جسم الطلب.

ترجع طريقة fetch() وعدًا يحل إلى كائن الاستجابة الذي يمثل رد الطلب. يمكننا بعد ذلك استخدام خاصية ok لكائن الاستجابة للتحقق مما إذا كان الطلب ناجحًا أم لا. إذا لم يكن الطلب ناجحًا، نقوم برمي خطأ. إذا كان الطلب ناجحًا، نستخدم طريقة json() لكائن الاستجابة لاستخراج بيانات JSON من الاستجابة. أخيرًا، نقوم بتسجيل بيانات JSON في وحدة التحكم.

بديل لـ Fetch: إرسال بيانات JSON بسهولة أكبر باستخدام Apidog

Apidog هي أداة قائمة على الويب تساعدك في اختبار وتصحيح واجهات برمجة التطبيقات. تتيح لك إرسال طلبات HTTP إلى أي نقطة نهاية واجهة برمجة التطبيقات والحصول على الاستجابة في تنسيقات مختلفة، مثل JSON، XML، HTML، إلخ. يمكنك أيضًا فحص الرؤوس، والكوكيز، وأكواد الحالة، والتفاصيل الأخرى للاستجابة. كما يتيح لك Apidog التلاعب ببيانات الاستجابة باستخدام JavaScript، وتصنيف البيانات باستخدام JSONPath، والتحقق من صحة البيانات باستخدام JSON Schema. يمكنك أيضًا حفظ طلبات واجهة برمجة التطبيقات ومشاركتها مع الآخرين باستخدام عنوان URL فريد.

تعتبر Apidog أداة رائعة لأي شخص يعمل مع واجهات برمجة التطبيقات، سواء كنت مطورًا أو مختبرًا أو مصممًا أو طالبًا. تساعدك على:

• تعلم كيفية استخدام واجهات برمجة التطبيقات المختلفة واستكشاف ميزاتها
• اختبار وتصحيح واجهات برمجة التطبيقات الخاصة بك والعثور على الأخطاء والأعطال
• تجربة مع معلمات وخيارات مختلفة ورؤية كيفية تأثيرها على الاستجابة
• توثيق وإظهار استخدام واجهة برمجة التطبيقات والنتائج
• التعاون والتواصل مع مستخدمي ومطوري واجهات برمجة التطبيقات الآخرين

Apidog سهلة الاستخدام، سريعة، وموثوقة. تعمل مع أي واجهة برمجة تطبيقات تدعم طلبات HTTP، مثل RESTful، SOAP، GraphQL، إلخ. كما تدعم طرق المصادقة المختلفة، مثل Basic، Bearer، OAuth، إلخ. يمكنك استخدام Apidog على أي جهاز ومتصفح، طالما لديك اتصال بالإنترنت.

توليد بيانات Fetch Post JSON في Apidog

Apidog هي منصة تطوير واجهات برمجة التطبيقات الشاملة التعاونية التي توفر مجموعة أدوات شاملة لتصميم وتصحيح واختبار ونشر وهمmock واجهات برمجة التطبيقات. يمكن أن تساعد أيضًا في توليد كود Fetch.

الخطوة 1: افتح Apidog وانقر على زر "طلب جديد" لإنشاء طلب جديد.

الخطوة 2: أدخل عنوان URL لنقطة نهاية واجهة برمجة التطبيقات التي تريد استرجاع بيانات JSON بعد الإرسال منها وانتقل إلى واجهة التصميم.

الخطوة 3: انقر على "توليد كود العميل".

الخطوة 4: اختر الكود الذي تريد توليده، وفي حالتنا هو Fetch، وقم بنسخ ذلك إلى مشروعك.

إرسال بيانات JSON من أي واجهة برمجة تطبيقات باستخدام Apidog

لاختبار استرجاع بيانات JSON بعد الإرسال من أي واجهة برمجة تطبيقات باستخدام Apidog، تحتاج إلى اتباع هذه الخطوات البسيطة:

1. افتح Apidog وانقر على زر "طلب جديد" لإنشاء طلب جديد.

1. اختر "POST" كأسلوب الطلب.

3. أدخل عنوان URL لنقطة نهاية واجهة برمجة التطبيقات التي تريد استرجاع بيانات JSON بعد الإرسال منها. على سبيل المثال، إذا كنت تريد استرجاع بيانات JSON بعد الإرسال من واجهة برمجة تطبيقات JSON Placeholder، وهي واجهة برمجة تطبيقات REST وهمية عبر الإنترنت للاختبار والنمذجة، يمكنك إدخال https://jsonplaceholder.typicode.com/posts كعنوان URL.

ثم انقر على علامة "Body" واختر "JSON" كنوع الجسم. أدخل بيانات JSON بعد الإرسال التي تريد إرسالها إلى واجهة برمجة التطبيقات في منطقة النص. على سبيل المثال، إذا كنت تريد إنشاء مشاركة جديدة مع واجهة برمجة تطبيقات JSON Placeholder، يمكنك إدخال بيانات JSON بعد الإرسال التالية:

{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  }
  

انقر على زر "إرسال" لإرسال الطلب إلى واجهة برمجة التطبيقات واسترجاع بيانات JSON بعد الإرسال.

عرض الاستجابة من واجهة برمجة التطبيقات في علامة "الاستجابة". يمكنك رؤية رمز الحالة، والرؤوس، وجسم الاستجابة. يمكنك كذلك التبديل بين تنسيقات مختلفة للاستجابة، مثل JSON، HTML، XML، أو RAW. على سبيل المثال، إذا قمت باسترجاع بيانات JSON بعد الإرسال من واجهة برمجة تطبيقات JSON Placeholder، يمكنك رؤية الاستجابة التالية بتنسيق JSON:

{
    "userId": 1,
    "id": 101,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

تهانينا! لقد قمت باسترجاع بيانات JSON بعد الإرسال بنجاح من أي واجهة برمجة تطبيقات باستخدام Apidog. يمكنك الآن تعديل، حفظ، أو مشاركة طلبك كما تشاء.

ما هي فوائد استرجاع بيانات JSON بعد الإرسال باستخدام Apidog؟

استرجاع بيانات JSON بعد الإرسال من أي واجهة برمجة تطبيقات باستخدام Apidog له العديد من الفوائد، مثل:

• إنه سهل ومريح. لا تحتاج إلى كتابة أي كود، أو تثبيت أي برنامج، أو إعداد أي بيئة. تحتاج فقط إلى متصفح ويب واتصال بالإنترنت.
• إنه سريع وموثوق. يمكنك إرسال واستقبال الطلبات والاستجابات في ثوانٍ. يمكنك أيضًا رؤية رمز الحالة، والرؤوس، وجسم الاستجابة بتنسيقات مختلفة.
• إنه مرن ومتعدد الاستخدامات. يمكنك استرجاع بيانات JSON بعد الإرسال من أي واجهة برمجة تطبيقات، سواء كانت عامة أو خاصة، بسيطة أو معقدة، RESTful أو لا. يمكنك أيضًا إضافة رؤوس، ومعلمات استعلام، ومعلمات جسم، ومصادقة إلى طلباتك.
• إنه ممتع وتعليمي. يمكنك أن تتعلم كيفية عمل واجهة برمجة التطبيقات وما البيانات التي تتوقعها وتعيدها. يمكنك أيضًا استكشاف ميزات وقدرات واجهة برمجة التطبيقات. يمكنك أيضًا دمج واجهة برمجة التطبيقات مع تطبيقك أو مشروعك الخاص.

الخاتمة

واجهة Fetch API هي واجهة معيارية للويب للتواصل HTTP في JavaScript. في هذه المقالة، تعلمنا كيفية استرجاع بيانات JSON بعد الإرسال وقد قمنا بتقديم Apidog.

يدعم Apidog أنواعًا مختلفة من الطلبات، مثل GET و POST و PUT و PATCH و DELETE والمزيد. يمكنك أيضًا إضافة رؤوس، ومعلمات استعلام، ومعلمات جسم، ومصادقة إلى طلباتك. Apidog يمكنها التعامل مع أي نوع من بيانات JSON، سواء كانت مصفوفة أو كائنًا أو هيكلًا متداخلًا.