كيفية جلب بيانات من قاعدة بيانات واظهارها دون تحديث الصفحة

تحتاج إلى إستخدام تقنية Ajax و هي عبارة عن وسيلة لجلب البيانات من الخادم دون الحاجة لإعادة تحميل الصفحة: اعرف أكثر عن Ajax

مثال بإستخدام jQuery و لغة php:

$(function() {
  $('#myBtn').on('click', function(){
    var id= $('#myInput').val();
    if(id != '')
    {
      $.ajax({
        url:"fetch.php",
        method:"POST",
        data:{id:id},
        dataType:"JSON",
        success:function(data)
        {

          console.log(data);
          
          // data is available do what u want here

        }
      })
    }
    else
    {
      alert("Please enter a valid id");
    }
  });
});

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

إرسال طلب ajax للخادم في حالة تحقق الشرط يشمل ال id الذي تم إدخاله، معالجة الطلب في الملف fetch.php و إرجاع البيانات التي ستُصبح متاحة في حال نجاح الطلب و هو ما يتم عرضه بداخل success.

ملف الخادم حسب اللغة التي تريد إستخدامها هنا في المثال نستخدم php لذلك الملف سيكون مشابه لـ:

<?php
//fetch.php
if(isset($_POST["id"]))
{
  $connect = mysqli_connect("localhost", "root", "", "testing"); // الإتصال بقاعدة البيانات
  $query = "SELECT * FROM tbl_name WHERE id = '".$_POST["id"]."'";  // بناء الإستعلام
  $result = mysqli_query($connect, $query); // تنفيذ الإستعلام
  while($row = mysqli_fetch_array($result)) // إنشاء مصفوفة حسب البيانات التي نريد إرجاعها
  {
    $data["column1"] = $row["column1"];
    $data["column2"] = $row["column2"];
    $data["column3"] = $row["column3"];
    // ...
    // ...
    // ...
  }

  echo json_encode($data);
}
?>

طريقة العرض في الصفحة تعتمد عليك، يتم ذلك من خلال دالة المعالجة success حيث تستهدف العناصر في الصفحة من خلال تحديدها عن طريق المُعرف أو أي محدد ثم تحقن بداخلها البيانات التي جُلبت، بفرض أنه جلبنا الحقل name و بداخل الصفحة هناك عُنصر مثلا h3 و يحمل المُعرف nameEl فنُحدد العُنصر عن طريقه ثم بإستخدام التابع text نضع القيمة بداخله بهذا الشكل:

$('#nameEl').text(data.name);

بتاريخ 13 ساعات قال عبود سمير:

تحتاج إلى إستخدام تقنية Ajax و هي عبارة عن وسيلة لجلب البيانات من الخادم دون الحاجة لإعادة تحميل الصفحة: اعرف أكثر عن Ajax

مثال بإستخدام jQuery و لغة php:

$(function() {
  $('#myBtn').on('click', function(){
    var id= $('#myInput').val();
    if(id != '')
    {
      $.ajax({
        url:"fetch.php",
        method:"POST",
        data:{id:id},
        dataType:"JSON",
        success:function(data)
        {

          console.log(data);
          
          // data is available do what u want here

        }
      })
    }
    else
    {
      alert("Please enter a valid id");
    }
  });
});

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

إرسال طلب ajax للخادم في حالة تحقق الشرط يشمل ال id الذي تم إدخاله، معالجة الطلب في الملف fetch.php و إرجاع البيانات التي ستُصبح متاحة في حال نجاح الطلب و هو ما يتم عرضه بداخل success.

ملف الخادم حسب اللغة التي تريد إستخدامها هنا في المثال نستخدم php لذلك الملف سيكون مشابه لـ:

<?php
//fetch.php
if(isset($_POST["id"]))
{
  $connect = mysqli_connect("localhost", "root", "", "testing"); // الإتصال بقاعدة البيانات
  $query = "SELECT * FROM tbl_name WHERE id = '".$_POST["id"]."'";  // بناء الإستعلام
  $result = mysqli_query($connect, $query); // تنفيذ الإستعلام
  while($row = mysqli_fetch_array($result)) // إنشاء مصفوفة حسب البيانات التي نريد إرجاعها
  {
    $data["column1"] = $row["column1"];
    $data["column2"] = $row["column2"];
    $data["column3"] = $row["column3"];
    // ...
    // ...
    // ...
  }

  echo json_encode($data);
}
?>

طريقة العرض في الصفحة تعتمد عليك، يتم ذلك من خلال دالة المعالجة success حيث تستهدف العناصر في الصفحة من خلال تحديدها عن طريق المُعرف أو أي محدد ثم تحقن بداخلها البيانات التي جُلبت، بفرض أنه جلبنا الحقل name و بداخل الصفحة هناك عُنصر مثلا h3 و يحمل المُعرف nameEl فنُحدد العُنصر عن طريقه ثم بإستخدام التابع text نضع القيمة بداخله بهذا الشكل:

$('#nameEl').text(data.name);

ولو صورة

بتاريخ 3 ساعات قال Karem Negm:

ولو صورة

الصورة تقوم إما بإنشاء عُنصر img من خلال جافاسكربت و تضيف مسار الصورة الذي جلبته من قاعدة البيانات إلى الخاصية src للعُنصر الذي أنشأته ثم تضيف هذا الأخير إلى الصفحة الخاصة بك. أو يكون لديك مثلاً عُنصر img في الصفحة تقوم بإستهدافه من خلال جافاسكربت ثم تُغير قيمة الخاصية src له بما جلبته من قاعدة البيانات.