JSON rất có thể dễ dàng được dịch sang JavaScript. JavaScript có thể được sử dụng để tạo HTML trong các trang web của bạn.
Table of Contents
Ví dụ ta có bảng HTML như sau
Tạo bảng HTML với dữ liệu nhận được dưới dạng JSON:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <body> <h2>Make a table based on JSON data.</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> |
Kết quả:
Make a table based on JSON data.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Ví dụ với bảng HTML động
Tạo bảng HTML dựa trên giá trị của menu thả xuống:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <body> <h2>Make a table based on the value of a drop down menu.</h2> <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> <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> |
Chi tiết tại: https://www.w3schools.com/js/tryit.asp?filename=tryjson_html_table_dynamic
Tạo danh sách thả xuống HTML với dữ liệu JSON
Tạo danh sách thả xuống HTML với dữ liệu nhận được dưới dạng JSON:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <body> <h2>Make a drop down list based on JSON data.</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 = "<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> |
Chi tiết: https://www.w3schools.com/js/tryit.asp?filename=tryjson_html_select