JavaScript

JSON HTML

في هذا الدرس سوف نتعرف علي طريقة استخدام بيانات ال JSON مع عناصر ال HTML 

التاريخ

22 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

730

المواضيع

24
الشروحات chevron_left JSON HTML chevron_left JavaScript

JSON HTML

</> JSON HTML

  • يمكننا بسهولة تحويل ال JSON الي java script 
  • java script يمكن ان تستخدم لأنشاء عناصر HTML بداخل صفحة الويب الخاصة بك

</> HTML Table

في المثال التالي قمنا بأنشاء جدول HTML وملئه بالبيانات المستلمة على هيئة JSON:

Example
const dbParam = JSON.stringify({table:"customers",limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  myObj = JSON.parse(this.responseText);
  let text = "<table border='1'>"
  for (let x in myObj) {
    text += "<tr><td>" + myObj[x].name + "</td></tr>";
  }
  text += "</table>"
  document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "/files/gethint.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

</> Dynamic HTML Table

في المثال التالي سوف نجعل البيانات التي سوف تظهر في جدول البيانات معتمدة علي قيمة ال القائمة المنسدلة drop down list 

Example
<select id="myselect" onchange="change_myselect(this.value)">
  <option value="">Choose an option:</option>
  <option value="customers">Customers</option>
  <option value="products">Products</option>
  <option value="suppliers">Suppliers</option>
</select>

<script>
function change_myselect(sel) {
  const dbParam = JSON.stringify({table:sel,limit:20});
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.onload = function() {
    const myObj = JSON.parse(this.responseText);
    let text = "<table border='1'>"
    for (let x in myObj) {
      text += "<tr><td>" + myObj[x].name + "</td></tr>";
    }
    text += "</table>"
    document.getElementById("demo").innerHTML = text;
  }
  xmlhttp.open("POST", "json_demo_html_table.php");
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("x=" + dbParam);
}
</script>

</> HTML Drop Down List

في المثال التالي قمنا بأنشاء قائمة منسدلة باستخدام  HTML وقمنا بتعبئتها ببيانات ال JSON

Example
const dbParam = JSON.stringify({table:"customers",limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text = "<select>"
  for (let x in myObj) {
    text += "<option>" + myObj[x].name;
  }
  text += "</select>"
  document.getElementById("demo").innerHTML = text;
  }
}
xmlhttp.open("POST", "json_demo_html_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات