HTML JSON
JSON có thể được dịch sang JavaScript rất dễ dàng.
JavaScript có thể được sử dụng để tạo HTML trong các trang web của bạn.
Bảng HTML
Tạo một bảng HTML với dữ liệu nhận được dưới dạng JSON:
Ví dụ
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);
Hãy tự mình thử »Bảng HTML động
Tạo bảng HTML dựa trên giá trị của menu thả xuống:
Ví dụ
<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>
Hãy tự mình thử » Danh sách thả xuống HTML
Tạo danh sách thả xuống HTML với dữ liệu nhận được dưới dạng JSON:
Ví dụ
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);
Hãy tự mình thử »