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);
»
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>
»
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);
»
0 comments: