Cách sử dụng XSLT để hiển thị dữ liệu XML trên trang web HTML
Để xem dữ liệu XML như một phần của trang web, bạn có thể sử dụng XSLT; trình duyệt không tự cung cấp khả năng này.
XML là một ngôn ngữ được sử dụng để cấu trúc, lưu trữ và trao đổi dữ liệu. XSLT là một ngôn ngữ khác cho phép bạn chuyển đổi dữ liệu XML của mình sang các định dạng khác, chẳng hạn như HTML.
Bạn có thể sử dụng XSLT để hiển thị dữ liệu XML trên trang web HTML. Việc sử dụng XML và XSLT để hiển thị dữ liệu của bạn có thể hữu ích vì nó cho phép bạn cấu trúc dữ liệu theo cách phù hợp với các nhu cầu cụ thể của bạn.
Mục Lục
Cách thêm dữ liệu mẫu vào tệp XML
Để hiển thị dữ liệu XML trên trang web, trước tiên bạn cần tạo tệp XML và thêm dữ liệu vào tệp đó.
- Tạo một tệp mới có tên data.xml.
- Bên trong tệp XML, khai báo mã hóa và phiên bản XML:
<?xml version="1.0" encoding="UTF-8"?> - Liên kết tệp XML với tệp biểu định kiểu XSL mà bạn sẽ tạo ở bước sau.
<?xml-stylesheet type="text/xsl" href="https://www.smartreviewaz.com/display-xml-on-webpage-using-xslt/xmlstylesheet.xsl"?> - Thêm dữ liệu vào tệp XML. XML chứa dữ liệu có cấu trúc và lưu trữ từng điểm dữ liệu trong một thẻ riêng biệt. Ví dụ này bao gồm một thẻ gốc được gọi là Trò chơi. Bên trong Trò chơi gắn thẻ, lưu trữ từng trò chơi riêng lẻ bên trong trò chơi của riêng mình trò chơi nhãn. Lưu trữ dữ liệu cho mỗi trò chơi chẳng hạn như Tên và nhà phát triển trong các thẻ riêng biệt.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="https://www.smartreviewaz.com/display-xml-on-webpage-using-xslt/xmlstylesheet.xsl"?>
<games>
<game>
<name>The Last of Us Part II</name>
<developer>Naughty Dog</developer>
</game>
<game>
<name>Ghost of Tsushima</name>
<developer>Sucker Punch Productions</developer>
</game>
<game>
<name>Death Stranding</name>
<developer>Kojima Productions</developer>
</game>
</games>
Cách sử dụng XSLT để đọc dữ liệu từ tệp XML
Tạo một tệp XSL mới để lặp qua từng điểm dữ liệu trong trang XML và hiển thị dữ liệu.
- Trong cùng thư mục với tệp XML của bạn, hãy tạo một tệp mới có tên xmlstylesheet.xsl.
- Bên trong tệp, khai báo phiên bản XSL và thêm cấu trúc thẻ XSL cơ bản:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
</xsl:stylesheet> - Bên trong thẻ XSL chính, thêm một mẫu nhãn. Đây là nơi bạn có thể thêm mã HTML tùy chỉnh để hiển thị và tạo kiểu cho dữ liệu XML của mình.
<xsl:template match="https://www.smartreviewaz.com/">
<html>
<body>
</body>
</html>
</xsl:template> - Bên trong thẻ body, sử dụng xsl:cho mỗi bộ chọn thẻ. Điều này sẽ hoạt động như một vòng lặp for để lặp qua từng trò chơi thẻ được lồng bên dưới Trò chơi nhãn.
<xsl:for-each select="games/game">
</xsl:for-each> - Bên trong vòng lặp for-each, hiển thị tên và điểm dữ liệu của nhà phát triển, sử dụng xsl: giá trị của bộ chọn thẻ.
<xsl:value-of select="name" />
<xsl:value-of select="developer" />
Cách hiển thị dữ liệu trên trang web HTML
Bạn sẽ không thể mở tệp XSLT hoặc XML trực tiếp trong trình duyệt để xem dữ liệu như một phần của trang web. Tạo một tệp HTML mới và hiển thị dữ liệu bằng cách sử dụng một iframe nhãn.
- Trong cùng thư mục với các tệp XML và XSL của bạn, hãy tạo một tệp mới có tên index.html.
- Thêm cấu trúc cơ bản của tệp HTML. Nếu bạn chưa sử dụng HTML trước đây, bạn có thể tìm hiểu các khái niệm cơ bản về HTML.
<!DOCTYPE html>
<html>
<head>
<title>XML and XSLT Example</title>
</head>
<body>
</body>
</html> - Bên trong cơ thể người đánh dấu, sử dụng một iframe để liên kết đến tệp XML và tệp XSL:
<h1>XML and XSLT Example</h1>
<p>The following content is generated from an XML file:</p>
<iframe src="data.xml" xslt="https://www.smartreviewaz.com/display-xml-on-webpage-using-xslt/xmlstylesheet.xsl"></iframe> - Tạo một tệp mới có tên phong cách.css.
- Bên trong tệp, thêm một số CSS để tạo kiểu cho trang web của bạn. Vui lòng sửa đổi CSS của bạn bằng cách sử dụng các mẹo và thủ thuật CSS thú vị khác.
html,
body {
height: 100%;
margin: 0;
}body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}p {
margin-bottom: 24px;
} - Liên kết tệp HTML của bạn với kiểu CSS bằng cách thêm phần sau vào thẻ đầu HTML.
<link rel="stylesheet" href="styles.css"> - Mở tệp HTML của bạn bằng trình duyệt để xem dữ liệu XML của bạn. Một số trình duyệt không hỗ trợ XSLT, nhưng một số trình duyệt như Firefox thì có.
Hiển thị dữ liệu trong các trang web HTML
Có nhiều cách để hiển thị dữ liệu trong các trang web HTML, XML và XSLT là một trong số đó. Vui lòng khám phá những cách khác mà bạn có thể thực hiện việc này, chẳng hạn như lưu trữ và hiển thị thông tin nhập của người dùng bằng JavaScript.