كيفية نقل البيانات من PHP إلى JavaScript: دليل شامل مع أمثلة

كيفية نقل البيانات من PHP إلى JavaScript: أسئلة شائعة وإجاباتها

هل سبق لك أن كتبت سكريبت PHP، وأنشأت مصفوفة بيانات من قاعدة البيانات، ثم أدركت برعب أن كود JavaScript في نفس الصفحة لا يعلم شيئًا عنها؟ موقف مألوف. PHP يعمل على الخادم، بينما JavaScript يعمل في متصفح المستخدم. هذان عالمين مختلفين، يفصل بينهما الزمان والمكان. ولكن كيف نجعلهم يتعاونون؟ كيف ننقل المتغيرات والبيانات من PHP إلى JavaScript؟

هذا الموضوع هو أحد أكثر الأسئلة شيوعًا على Stack Overflow (عشرات الآلاف من المشاهدات!). وليس من دون سبب: التفاعل بين كود الخادم وكود العميل هو مهارة أساسية لأي مطور ويب. في هذا المقال، سنستعرض 5 طرق مثبتة لنقل البيانات من PHP إلى JavaScript، من البسيطة إلى المتقدمة. هيا بنا!

لماذا لا يستطيع PHP وJavaScript التحدث ببساطة؟

قبل الغوص في الكود، دعنا نفهم البنية. عندما يطلب المستخدم صفحة، يحدث التالي:

\n
1. يقوم الخادم بتنفيذ سكريبت PHP.
\n
2. يقوم PHP بإنشاء HTML (ويمكنه إدراج JavaScript فيه).
\n
3. يرسل الخادم كود HTML النهائي إلى المتصفح.
\n
4. يقوم المتصفح بعرض الصفحة وتنفيذ JavaScript.
\n

النقطة الأساسية: يتم تنفيذ PHP قبل أن يرى JavaScript الصفحة. لذلك، نقل المتغيرات من PHP إلى JavaScript ممكن فقط في مرحلة إنشاء HTML. لا يمكن لـ JavaScript "طلب" بيانات من PHP بعد تحميل الصفحة (لهذا يوجد AJAX، لكن هذه قصة أخرى).

الطريقة 1: تضمين PHP مباشرة في JavaScript (الأسهل)

الطريقة الأكثر وضوحًا هي عرض متغير PHP مباشرة في كود JavaScript الذي يولده الخادم. مثال:

<?php\n$userName = "أحمد";\n$userAge = 28;\n?>\n\n<script>\n    var name = "<?php echo $userName; ?>";\n    var age = <?php echo $userAge; ?>;\n    console.log("مرحبًا، " + name + "! عمرك " + age + " سنة.");\n</script>\n

هل يعمل؟ نعم. هل هو جميل؟ ليس كثيرًا. العيوب واضحة:

\n
• يصبح الكود فوضويًا ويصعب قراءته.
\n
• إذا احتوى المتغير على علامات اقتباس أو وسوم HTML، فستحصل على خطأ نحوي في JavaScript.
\n
• الأمان؟ انسَ الأمر: هجمات XSS ستشكرك.
\n

هذه الطريقة مناسبة فقط للنصوص البسيطة بدون رموز خاصة (مثل معرف السجل أو رقم الصفحة). لكل شيء آخر، استخدم الطرق التالية.

الطريقة 2: JSON — ملك نقل البيانات

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

مثال: نقل مصفوفة مستخدمين من PHP إلى JavaScript.

<?php\n$users = [\n    ['name' => 'خالد', 'age' => 25],\n    ['name' => 'سارة', 'age' => 30],\n    ['name' => 'عمر', 'age' => 35]\n];\n$jsonUsers = json_encode($users, JSON_UNESCAPED_UNICODE);\n?>\n\n<script>\n    var users = <?php echo $jsonUsers; ?>;\n    console.log(users[0].name); // "خالد"\n    console.log(users.length); // 3\n</script>\n

لماذا هذا رائع؟

\n
• آمن: json_encode() يقوم تلقائيًا بتشفير الرموز الخاصة.
\n
• شامل: انقل النصوص، الأرقام، المصفوفات، الكائنات، القيم المنطقية.
\n
• نظيف: الكود سهل القراءة والصيانة.
\n

الملاحظة الوحيدة هي أن البيانات تُضمّن مباشرة في كود HTML للصفحة. إذا كانت البيانات كثيرة، ستصبح الصفحة أثقل. لكن لمعظم المهام، هذا هو الخيار الأمثل.

الطريقة 3: سمات البيانات في HTML (لنقل البيانات عبر DOM)

أحيانًا تحتاج إلى نقل بيانات مرتبطة بعنصر معين في الصفحة. على سبيل المثال