شبيبة تعليمي

شبيبة المنزل مقدمة شبيبة شبيبة إلى أين إخراج JS بيانات شبيبة بناء جملة JS تعليقات JS متغيرات JS JS Let شبيبة كونست مشغلي JS شبيبة الحساب احالة JS أنواع بيانات JS وظائف JS كائنات JS أحداث شبيبة سلاسل شبيبة طرق سلسلة JS بحث سلسلة JS JS String Templates أرقام شبيبة طرق عدد JS صفيفات JS طرق صفيف JS ترتيب صفيف JS تكرار صفيف JS JS Array Const تواريخ شبيبة تنسيقات التاريخ JS طرق الحصول على تاريخ JS طرق تعيين تاريخ JS شبيبة الرياضيات شبيبة عشوائية شبيبة منطقية مقارنات شبيبة شروط JS مفتاح JS JS Loop For JS Loop For In. شبيبة حلقة JS لـ Of شبيبة حلقة بينما شبيبة استراحة شبيبة تكرارات مجموعات JS خرائط شبيبة شبيبة تايبوف JS نوع التحويل شبيبة Bitwise JS RegExp أخطاء JS شبيبة النطاق رفع JS وضع JS الصارم شبيبة هذه الكلمة دالة سهم JS فئات JS شبيبة شبيبة تصحيح أخطاء JS دليل أسلوب JS أفضل ممارسات JS أخطاء JS أداء JS شبيبة الكلمات المحجوزة

إصدارات JS

إصدارات JS JS 2009 (ES5) شبيبة 2015 (ES6) شبيبة 2016 شبيبة 2017 شبيبة 2018 شبيبة آي إي / إيدج تاريخ شبيبة

كائنات JS

تعريفات الكائن خصائص الموضوع طرق الكائن عرض الكائن موصلي الكائنات منشئو الكائنات نماذج الكائن كائن تكرارات مجموعات الكائن خرائط الكائن مرجع الكائن

وظائف JS

تعريفات الوظائف معلمات الوظيفة استدعاء الوظيفة استدعاء الوظيفة تطبيق الوظيفة عمليات إغلاق الوظائف

فئات JS

مقدمة عن الفصل الوراثة الطبقية فئة ثابتة

شبيبة آسينك

عمليات الاسترجاعات JS شبيبة غير متزامن وعود شبيبة شبيبة Async / انتظار

JS HTML DOM

مقدمة DOM طرق DOM مستند DOM عناصر DOM DOM HTML نماذج DOM DOM CSS الرسوم المتحركة DOM أحداث DOM مستمع أحداث DOM التنقل في DOM عقد DOM مجموعات DOM قوائم عقدة DOM

متصفح JS BOM

نافذة JS شاشة JS موقع JS تاريخ شبيبة شبيبة ملاح تنبيه منبثق لـ JS توقيت شبيبة ملفات تعريف الارتباط JS

JS Web APIs

مقدمة واجهة برمجة تطبيقات الويب واجهة برمجة تطبيقات نماذج الويب واجهة برمجة تطبيقات سجل الويب واجهة برمجة تطبيقات تخزين الويب Web Worker API واجهة برمجة تطبيقات جلب الويب واجهة برمجة تطبيقات تحديد الموقع الجغرافي على الويب

شبيبة أجاكس

مقدمة أجاكس أجاكس XMLHttp طلب AJAX استجابة AJAX ملف AJAX XML أجاكس بي إتش بي أجاكس آسيا والمحيط الهادئ قاعدة بيانات أجاكس تطبيقات أجاكس أمثلة AJAX

شبيبة شبيبة

مقدمة JSON بناء جملة JSON JSON مقابل XML أنواع بيانات JSON تحليل JSON تنسيق JSON كائنات JSON صفائف JSON خادم JSON JSON PHP JSON HTML جسون جسونب

JS مقابل jQuery

محددات jQuery jQuery HTML jQuery CSS jQuery DOM

شبيبة الرسومات

شبيبة الرسومات قماش شبيبة شبيبة بلوتلي JS Chart.js مخطط جوجل JS شبيبة D3.js

أمثلة JS

أمثلة JS JS HTML DOM إدخال JS HTML كائنات JS HTML أحداث HTML متصفح JS محرر JS تمارين شبيبة شبيبة مسابقة شهادة JS

مراجع JS

كائنات جافا سكريبت كائنات HTML DOM


JSON PHP


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

سيعلمك هذا الفصل كيفية تبادل بيانات JSON بين العميل وخادم PHP.


ملف PHP

تحتوي PHP على بعض الوظائف المضمنة للتعامل مع JSON.

يمكن تحويل الكائنات في PHP إلى JSON باستخدام دالة PHP json_encode () :

ملف PHP

<?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";

$myJSON = json_encode($myObj);

echo $myJSON;
?>

جافا سكريبت العميل

فيما يلي JavaScript على العميل ، باستخدام استدعاء AJAX لطلب ملف PHP من المثال أعلاه:

مثال

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

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();


صفيف PHP

سيتم أيضًا تحويل المصفوفات في PHP إلى JSON عند استخدام دالة PHP json_encode () :

ملف PHP

<?php
$myArr = array("John", "Mary", "Peter", "Sally");

$myJSON = json_encode($myArr);

echo $myJSON;
?>

جافا سكريبت العميل

فيما يلي JavaScript على العميل ، باستخدام استدعاء AJAX لطلب ملف PHP من مثال المصفوفة أعلاه:

مثال

استخدم JSON.parse () لتحويل النتيجة إلى مصفوفة JavaScript:

var 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", true);
xmlhttp.send();

قاعدة بيانات PHP

PHP هي لغة برمجة من جانب الخادم ، ويمكن استخدامها للوصول إلى قاعدة بيانات.

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

على العميل ، قم بإنشاء كائن JSON يصف عدد الصفوف التي تريد إرجاعها.

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

مثال

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

const limit = {"limit":10};
const dbParam = JSON.stringify(limit);
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xmlhttp.open("GET","json_demo_db.php?x=" + dbParam);
xmlhttp.send();

شرح المثال:

  • حدد كائنًا يحتوي على خاصية وقيمة "حد".
  • تحويل الكائن إلى سلسلة JSON.
  • أرسل طلبًا إلى ملف PHP ، باستخدام سلسلة JSON كمعامل.
  • انتظر حتى يعود الطلب بالنتيجة (مثل JSON)
  • اعرض النتيجة المستلمة من ملف PHP.

ألق نظرة على ملف PHP:

ملف PHP

<?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);
?>

شرح ملف PHP:

  • قم بتحويل الطلب إلى كائن باستخدام دالة PHP json_decode () .
  • الوصول إلى قاعدة البيانات ، وتعبئة المصفوفة بالبيانات المطلوبة.
  • أضف المصفوفة إلى كائن ، وأعد الكائن على هيئة JSON باستخدام الدالة json_encode () .

استخدم البيانات

مثال

xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text = "";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}

طريقة PHP = POST

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

لإرسال طلبات AJAX باستخدام POSTالطريقة ، حدد الطريقة والعنوان الصحيح.

يجب أن تكون البيانات المرسلة إلى الخادم الآن وسيطة send()للطريقة:

مثال

const dbParam = JSON.stringify({"limit":10});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const 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);

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

ملف PHP

استخدم $ _POST بدلاً من $ _GET:

<?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);
?>