JavaScript

JSON Server

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

التاريخ

22 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1336

المواضيع

24
الشروحات chevron_left JSON Server chevron_left JavaScript

JSON Server

</> JSON Server

- الاستخدام الشائع الذي تستخدم خلاله ال JSON هو ارسال واستقبال البيانات من والي الخادم 

- عند استقبال البيانات من خادم الويب فأنها تكون دائما في الحالة النصية 

- يمكنك تحويل هذه البيانات الي JavaScript object باستخدام الدالة ( )JSON.parse

</> Sending Data

اذا كنت تمتلك بيانات مخزنة بداخل java script object فيمكنك تحويل هذا ال object ثم بعد ذلك تقوم بأرسالها الي الي الخادم 

Example
const myObj = {name: "Ahmed", age: 31, city: "Cairo"};
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

</> Receiving Data

اذا كنت تستقبل البيانات علي شكل JSON فيمكنك بسهولة تحويلها الي java script object 

Example
const myJSON = '{"name":"Ahmed", "age":31, "city":"Cairo"}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

</> JSON From a Server

يمكنك ارسال طلب JSON الي الخادم بأستخدام AJAX

واذا كنت تستقبل البيانات Response علي شكل JSON فيمكنك بسهولة تحويلها الي java script object 

- في المثال التالي قمنا بأستخدام العنصر "XMLHttpRequest" للحصول علي البيانات من الخادم 

Example
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
};
xmlhttp.open("GET", "json_demo.txt");
xmlhttp.send();

</> Array as JSON

عند استخدام JSON.parse () على JSON  والدي هو مشتق من مصفوفة ، ستقوم الدالة بأرجاع مصفوفة JavaScript ، بدلاً من كائن JavaScript.

Example
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myArr = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myArr[0];
  }
}
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات