JavaScript

JSON PHP

في هذا الدرس سوف نتعرف علي طريقة التعامل مع ال JSON باستخدام لغة ال PHP

التاريخ

22 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1027

المواضيع

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

JSON PHP

</> JSON PHP

الاستخدام الشائع لـ JSON هو قراءة البيانات من خادم الويب ، وعرض البيانات في صفحة ويب.

</> The PHP File

تحتوي لغة ال PHP علي بعض الدوال المضمنة بداخلها built in للتعامل مع بيانات ال JSON 

يمكنك تحويل ال Object الي JSON في لغة ال PHP باستخدام دالة  ( )json_encode

Example
<?php
$myObj = new stdClass();
$myObj->name = "Ahmed";
$myObj->age = 30;
$myObj->city = "Cairo";

$myJSON = json_encode($myObj);

echo $myJSON;
?>

</> The Client JavaScript

والان سوف نقوم بأرسال طلب بأستخدام ال AJAX لأحضار ملف PHP من المثال السابق 

Example
<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();

xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "demo_file.php");
xmlhttp.send();
</script>

</body>
</html>

</> PHP Array

يمكننا أيضا تحويل مصفوفات ال PHP الي JSON باستخدام الدالة ( )json_encode

Example
<?php
$myArr = array("Ahmed", "Mahmoud", "Mustafa", "Hazem");

$myJSON = json_encode($myArr);

echo $myJSON;
?>

</> The Client JavaScript

والان سوف نقوم بأرسال طلب بأستخدام ال AJAX لأحضار ملف PHP من مثال المصفوفة array السابق 

Example
<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p>Convert the data into a JavaScript array:</p>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj[2];
}
xmlhttp.open("GET", "demo_file_array.php");
xmlhttp.send();
</script>

</body>
</html>

</> PHP Database

- لغة PHP هي لغة خادم Server side أي انك يمكننا استخدامها للوصول الي قواعد البيانات 

تخيل أن لديك قاعدة بيانات مخزنة على الخادم الخاص بك ، وتريد إرسال طلب إليها من client side حيث تطلب الصفوف العشرة الأولى في جدول يسمى "clients".

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

استخدم الدالة JSON.stringify () لتحويل كائن JavaScript إلى JSON:

Example
<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p>The JSON received from the PHP file:</p>

<p id="demo"></p>

<script>
const dbParam = JSON.stringify({"limit":10});

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam);
xmlhttp.send();
</script>

</body>
</html>

شرح المثال السابق

  • قمنا بأنشاء object يحتوي علي الخاصية "limit" وقمنا بتعيين قيمتها 
  • قمنا بتحويل ال object الي JOSN 
  • تم أرسال طلب Request الي ملف PHP 
  • انتظرنا الي ان يتم أرجاع الرد علي هيئة "JSON"
  • تم طباعة البيانات التي تم الحصول عليها من ملف ال PHP

</> PHP File

في المثال التالي هو ملف ال PHP الذي قمنا بأستدعائه 

  • يقوم الملف بتحويل الطلب الي object باستخدام دالة ( )json_encode وهي خاصة بلغة ال PHP
  • يتم الوصول الي الي قاعدة البيانات وملئ المصفوفة بالبيانات المطلوبة 
  • يتم وضع البيانات الموجودة بداخل ال array الي object 
  • يتم تحويل هذا ال object الي JSON باستخدام دالة ( )json_encode 
  • يتم أرسال ال object كنتيجة للطلب Response
PHP file
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>

</> Use the Data

Example

فيما يلي هو مثال علي استخدام البيانات المخزنة بعد الحصول عليها من قاعدة البيانات

<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p id="demo"></p>

<script>
const obj = { "limit":10 };
const dbParam = JSON.stringify(obj);
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  myObj = JSON.parse(this.responseText);
  let text = ""
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
};
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam);
xmlhttp.send();
</script>

<p>Try changing the "limit" property from 10 to 5.</p>

</body>
</html>

</> PHP Method = POST

عند إرسال البيانات إلى الخادم ، من الأفضل غالبًا استخدام دالة HTTP POST.

لتتمكن من ارسال طلب بأستخدام ال AJAX باستخدام دالة POST قم بتحديد الدالة ثم قم بتحديد ال header الصحيح 

- يتم تمرير البيانات التي سوف يتم أرسالها الي الخادم ك argument بداخل الدالة ( )send

Example
<!DOCTYPE html>
<html>
<body>

<h2>Use HTTP POST to Get JSON Data from a PHP Server</h2>

<p id="demo"></p>

<script>
const dbParam = JSON.stringify({"limit":10});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  myObj = JSON.parse(this.responseText);
  let text = "";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_db_post.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>

<p>Try changing the "limit" property from 10 to 5.</p>

</body>
</html>
PHP file

الاختلاف الوحيد هو دالة الحصول على البيانات المنقولة في ملف PHP

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات