JSON có thể dễ dàng được dịch sang Js. Từ đó Js có thể tạo HTML trong trang web của ta.
1. Tạo bảng HTML
Ta tạo bảng HTML với dữ liệu nhận được dưới dạng JSON
<!DOCTYPE html>
<html>
<body>
<h2>Tạo bảng dựa trên dữ liệu JSON.</h2>
<p id="demo"></p>
<script>
const dbParam = JSON.stringify({table:"customers",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>
</body>
</html>
2. Tạo bảng HTML động
Ta có thể tạo bảng HTML dựa trên giá trị của menu với nhiều lựa chọn
<!DOCTYPE html>
<html>
<body>
<h2>Lập bảng dựa trên giá trị của menu</h2>
<select id="myselect" onchange="change_myselect(this.value)">
<option value="">Chọn menu</option>
<option value="customers">Customers</option>
<option value="products">Các sản phẩm</option>
<option value="suppliers">Nhà tài trợ</option>
</select>
<p id="demo"></p>
<script>
function change_myselect(sel) {
const dbParam = JSON.stringify({table:sel,limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
myObj = JSON.parse(this.responseText);
text = "<table border='1'>"
for (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", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
</script>
</body>
</html>
3. Danh sách lựa chọn của HTML
Ta có thể tạo danh sách lựa chọn HTML với dữ liệu nhận được dưới dạng JSON
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
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");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
</body>
</html>
