عرض بيانات من الداتابيز في صفحة html

نحتاج لفعل ذلك لغة برمجة للتعامل مع قواعد بيانات, وأيضا نحتاج لربط الموقع بقاعدة البيانات, أما طريقة تنفيذ ذلك يعتمد على اللغة المستخدمة في الجهة الخلفية من الموقع ويعتمد أيضا على نوع قواعد البيانات المستخدمة في المشروع

يمكنك ذلك عن طريق الإستعانة بطلبات Ajax .

بحيث ستحتاج إلى :

1. إرسال طلبات إلى نقاط وصول معينة عن طريق XmlHttpRequest .
2. القراءة من الطلب .
3. تكرار إنشاء الصفوف كذا مرة بحسب البيانات التي تم جلبها و عرضها على الصفحة عن طريق الـ DOM.

مثال عملي : 

ليكن لدينا الجدول التالي : 

<table id="myTable">
  <tr>
    <th>الاسم</th>
    <th>اللقب</th>
  </tr>
</table>

نقوم بتحضير طلب Ajax لجلب الطلبة مثلا على هذا النحو : 

var xhttp = new XMLHttpRequest(); // نقوم بتعريف كائن طلب جديد

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) { 
       var response = JSON.parse(xhttp.responseText); // جلب البيانات
       
        response.forEach(element => createRowFromData(element)); // إنشاء صف لكل عنصر من المصفوفة
    }
};

xhttp.open("GET", "path/to/get/students", true); // فتح الطلب
xhttp.send(); // إرسال الطلب


function createRowFromData(data)
{
    var table = document.getElementById("myTable"),
        tr = document.createElement("tr"),
        td = document.createElement("td"),
        tdText = document.createTextNode(data.name),
        td2 = document.createElement("td"),
        td2Text = document.createTextNode(data.family_name);
  
    td.appendChild(tdText);
    td2.appendChild(td2Text);
  
    tr.appendChild(td)
      .appendChild(td2);
  
    table.appendChild(tr);
}