Kết hợp giữa JSON và HTML

JSON 3 Views

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.

Mục Lục

Ví dụ ta có bảng HTML như sau
Ví dụ với bảng HTML động
Tạo danh sách thả xuống HTML với dữ liệu JSON

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:

<!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>

<!DOCTYPE html>

<html>

<body>

<h2>Make a table based on JSON data.</h2>

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.

Alfreds Futterkiste

Ana Trujillo Emparedados y helados

Antonio Moreno Taqueria

Around the Horn

Berglunds snabbkop

Blauer See Delikatessen

Blondel pere et fils

Bolido Comidas preparadas

Bon app’

Bottom-Dollar Marketse

B’s Beverages

Cactus Comidas para llevar

Centro comercial Moctezuma

Chop-suey Chinese

Comercio Mineiro

Consolidated Holdings

Drachenblut Delikatessend

Du monde entier

Eastern Connection

Ernst Handel

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:

<!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>

<!DOCTYPE html>

<html>

<body>

<h2>Make a table based on the value of a drop down menu.</h2>

<option value="">Choose an option:</option>

<option value="customers">Customers</option>

<option value="products">Products</option>

<option value="suppliers">Suppliers</option>

</select>

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:

<!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>

<!DOCTYPE html>

<html>

<body>

<h2>Make a drop down list based on JSON data.</h2>

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

JSON

Kết hợp giữa JSON và HTML

Ví dụ ta có bảng HTML như sau

Ví dụ với bảng HTML động

Tạo danh sách thả xuống HTML với dữ liệu JSON

Bài liên quan