JSON: JSON HTML
Giải phóng thời gian, khai phóng năng lực
JSON dễ dàng được dịch sang JavaScript.
Còn JavaScript có thể được sử dụng để tạo HTML trong các trang web của bạn.
Bảng HTML
Tạo bảng HTML với dữ liệu nhận được dưới dạng JSON.
Ví dụ:
<!DOCTYPE html> <html> <body> <h2>Make a table based on JSON data.</h2> <p id="demo"></p> <script> var obj, dbParam, xmlhttp, myObj, x, txt = ""; 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_html_table.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("x=" + dbParam); </script> </body> </html>
Bảng HTML động
Tạo bảng HTML dựa trên giá trị của menu thả xuống:
Ví dụ:
<!DOCTYPE html> <html> <body> <h2>Tạo bảng dựa trên giá trị của drop down menu.</h2> <select id="myselect" onchange="change_myselect(this.value)"> <option value="">Mời chọn 1 mục:</option> <option value="customers">Customers</option> <option value="products">Products</option> <option value="suppliers">Suppliers</option> </select> <p id="demo"></p> <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_html_table.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("x=" + dbParam); } </script> </body> </html>
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:
<!DOCTYPE html> <html> <body> <h2>Make a drop down list based on JSON data.</h2> <p id="demo"></p> <script> var obj, dbParam, xmlhttp, myObj, x, txt = ""; 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_html_table.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("x=" + dbParam); </script> </body> </html>
Giải phóng thời gian, khai phóng năng lực