كيفية استخدام AJAX مع PHP لتحديث بيانات في صفحة الويب بدون إعادة تحميل الصفحة؟

ما فهمته هو أنك تريد منع تحديث الصفحة عند التحقق من الإجابة وعرض السؤال التالي، وذلك ممكن بالشكل التالي:

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

وفي صفحة الويب الخاصة بك، قم بإنشاء وظيفة JavaScript لإرسال طلب AJAX إلى الملف PHP والتحقق من الإجابة.

وهناك مكتبات مثل Axios أو jQuery لتبسيط عملية إرسال الطلب AJAX.

مثلاً لو استخدمنا jQuery سيكون الكود لديك بالشكل التالي:

$.ajax({
  url: 'تعيين-المسار-إلى-ملف-ال-PHP.php',
  method: 'POST',
  data: { إجابة: الإجابة_المدخلة },
  dataType: 'json',
  success: function(response) {
    // هنا يمكنك التعامل مع الاستجابة المستلمة من الملف PHP
    // على سبيل المثال، يمكنك التحقق من صحة الإجابة وإظهار رسالة للمستخدم أو إظهار السؤال التالي
  },
  error: function() {
    // في حالة حدوث خطأ أثناء إرسال الطلب
  }
});

وعليك استبدال 'تعيين-المسار-إلى-ملف-ال-PHP.php' بالمسار الصحيح إلى ملف PHP الذي يقوم بالتحقق من الإجابة وجلب السؤال التالي، و'الإجابة_المدخلة' تمثل الإجابة التي يقوم المستخدم بإدخالها.

ثم في ملف PHP، قم بمعالجة الطلب الوارد وتنفيذ العمليات المطلوبة، وتستطيع التحقق من الإجابة المدخلة والقيام بأي عمليات أخرى مثل استعلام قاعدة البيانات واسترداد السؤال التالي، ثم، قم بإرجاع البيانات في تنسيق JSON.

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

// قم بمعالجة البيانات وجلب السؤال التالي
$nextQuestion = // احصل على السؤال التالي من قاعدة البيانات أو من أي مصدر آخر

// قم بتشكيل البيانات في صيغة JSON
$response = array('question' => $nextQuestion);
echo json_encode($response);

وستعمل دالة json_encode() على تحويل المصفوفة $response إلى صيغة JSON وإرجاعها للواجهة.

وعندما تستقبل الاستجابة في وظيفة success في الجزء الخاص بالJavaScript، بإمكانك التحقق من البيانات المستلمة والتعامل معها وفقًا لمتطلبات التطبيق لديك، وتحديث الواجهة لعرض السؤال التالي أو عرض رسالة للمستخدم بناءًا على البيانات المستلمة.

أي في الواجهة سيكون لديك كود JavaScript يشبه التالي:

success: function(response) {
  // هنا يمكنك التعامل مع الاستجابة المستلمة من الملف PHP
  // على سبيل المثال، يمكنك التحقق من صحة الإجابة وإظهار رسالة للمستخدم أو إظهار السؤال التالي
  if (response.question) {
    // عرض السؤال التالي
  } else {
    // عرض رسالة للمستخدم
  }
}

وذلك في حالة استخدام jQuery أما إذا أردت استخدام جافاسكريبت النقية بدون مكتبة، فسيكون الكود كالتالي:

async function fetchData() {
  try {
    const response = await fetch('تعيين-المسار-إلى-ملف-ال-PHP.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ إجابة: الإجابة_المدخلة })
    });

    if (response.ok) {
      const data = await response.json();
      // هنا يمكنك التعامل مع البيانات المستلمة
      if (data.question) {
        // عرض السؤال التالي
      } else {
        // عرض رسالة للمستخدم
      }
    } else {
      // في حالة حدوث خطأ في الاستجابة
      throw new Error('حدث خطأ أثناء استدعاء الخادم');
    }
  } catch (error) {
    // في حالة حدوث خطأ أثناء الطلب
    console.error(error);
  }
}

fetchData();

حيث تستخدم fetch لإجراء طلب POST إلى الملف PHP المحدد، وتعيين رأس المحتوى لـ 'application/json' لإرسال بيانات الطلب في تنسيق JSON باستخدام JSON.stringify().

وبعد الحصول على الاستجابة من الخادم، نتحقق من صحة الاستجابة (response.ok) وفحصها باستخدام response.json() لتحويل الاستجابة إلى كائن JSON.

أما في حالة حدوث أخطاء، ستتم معالجتها في قسم الـ catch، ومن خلالها تستطيع تنفيذ الإجراءات المناسبة مثل عرض رسالة الخطأ أو تسجيلها في وحدة التحكم.

أما في حالة استخدام مكتبة Axios فسيكون الكود كالتالي:

import axios from 'axios';

async function fetchData() {
  try {
    const response = await axios.post('تعيين-المسار-إلى-ملف-ال-PHP.php', {
      إجابة: الإجابة_المدخلة
    });

    // هنا يمكنك التعامل مع البيانات المستلمة
    if (response.data.question) {
      // عرض السؤال التالي
    } else {
      // عرض رسالة للمستخدم
    }
  } catch (error) {
    // في حالة حدوث خطأ أثناء الطلب
    console.error(error);
  }
}

fetchData();

أولاً استيراد Axios في الكود باستخدام import، ثم استخدام axios.post لإرسال طلب POST إلى الملف PHP المحدد، وتمرير البيانات في الجسم (body) للطلب كما هو موضح.

هل يمكنني ان اتواصل معك عبر الديسكورد في مكالمة لن يستغرق ذلك الا نصف ساعا وستكون ساعدتني بشكل كبير اخي العزيز