في هذا الدرس 4تصفّح المواضيع
JSON HTML
JSON HTML
- يمكننا بسهولة تحويل ال JSON الي java script
- java script يمكن ان تستخدم لأنشاء عناصر HTML بداخل صفحة الويب الخاصة بك
HTML Table
HTML Table
في المثال التالي قمنا بأنشاء جدول HTML وملئه بالبيانات المستلمة على هيئة JSON:
Example
HTML
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
Dynamic HTML Table
في المثال التالي سوف نجعل البيانات التي سوف تظهر في جدول البيانات معتمدة علي قيمة ال القائمة المنسدلة drop down list
Example
HTML
<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 Drop Down List
في المثال التالي قمنا بأنشاء قائمة منسدلة باستخدام 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);
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.