JSON HTML
JSON can very easily be translated into JavaScript.
JavaScript can be used to make HTML in your web pages.
HTML Table
Make an HTML table with data received as JSON:
Example
obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4
&& this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].name + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML
= txt;
}
}
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
Try it Yourself »
Dynamic HTML Table
Make the HTML table based on the value of a drop down menu:
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) {
var obj, dbParam, xmlhttp, myObj,
x, txt = "";
obj = { table: sel, limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new
XMLHttpRequest();
xmlhttp.onreadystatechange =
function() {
if (this.readyState
== 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].name + "</td></tr>";
}
txt +=
"</table>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "json_demo_db_post.php",
true);
xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlhttp.send("x="
+ dbParam);
}
</script>
Try it Yourself »
HTML Drop Down List
Make an HTML drop down list with data received as JSON:
Example
obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4
&& this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<select>"
for (x in myObj) {
txt += "<option>" + myObj[x].name;
}
txt += "</select>"
document.getElementById("demo").innerHTML
= txt;
}
}
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
Try it Yourself »
