انتقل إلى محتوى الدرس
فقرة فرعية #4 من درس: JSON HTML

HTML Drop Down List

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

1 صفوف تعليمية
جافا سكريبت
2,801 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

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

Example

HTML
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);