जेएसओएन एचटीएमएल
JSON का बहुत आसानी से जावास्क्रिप्ट में अनुवाद किया जा सकता है।
जावास्क्रिप्ट का उपयोग आपके वेब पेजों में HTML बनाने के लिए किया जा सकता है।
एचटीएमएल टेबल
JSON के रूप में प्राप्त डेटा के साथ एक 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", "json_demo_html_table.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
गतिशील HTML तालिका
ड्रॉप डाउन मेनू के मान के आधार पर 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>
एचटीएमएल ड्रॉप डाउन सूची
JSON के रूप में प्राप्त डेटा के साथ एक 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 + "</option>";
}
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);