اذهب إلى المحتوى
  • 0

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

Lillian Engy

السؤال

Recommended Posts

  • 0

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك ذلك عن طريق الإستعانة بطلبات 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);
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...