Jak używać XSLT do wyświetlania danych XML na stronie internetowej HTML
XML to język używany do strukturyzowania, przechowywania i wymiany danych. XSLT to kolejny język, który umożliwia przekształcanie danych XML do innych formatów, takich jak HTML.
Możesz użyć XSLT do wyświetlania danych XML na stronie internetowej HTML. Używanie formatu XML i XSLT do wyświetlania danych może być przydatne, ponieważ umożliwia uporządkowanie danych w sposób, który ma sens dla określonych potrzeb.
Jak dodać przykładowe dane do pliku XML
Aby wyświetlić dane XML na stronie internetowej, należy najpierw utworzyć plik XML i dodać do niego dane.
- Utwórz nowy plik o nazwie data.xml .
- W pliku XML zadeklaruj kodowanie i wersję XML:
<?xml version="1.0"encoding="UTF-8"?> - Połącz plik XML z plikiem arkusza stylów XSL, który utworzysz w późniejszym kroku.
<?xml-stylesheet type="text/xsl"href="xmlstylesheet.xsl"?> - Dodaj dane do pliku XML. XML zawiera dane strukturalne i przechowuje każdy punkt danych w oddzielnym znaczniku. Ten przykład zawiera tag główny o nazwie games . Wewnątrz tagu gier przechowuj każdą pojedynczą grę w osobnym tagu gry . Przechowuj dane dla każdej gry, takie jak nazwa i programista , w osobnych tagach.
<?xml version="1.0"encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl"href="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>
Jak używać XSLT do odczytu danych z pliku XML
Utwórz nowy plik XSL, aby przejść przez każdy punkt danych na stronie XML i wyświetlić dane.
- W tym samym folderze co plik XML utwórz nowy plik o nazwie xmlstylesheet.xsl .
- Wewnątrz pliku zadeklaruj wersję XSL i dodaj podstawową strukturę tagów XSL:
<?xml version="1.0"encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
// Your code here
</xsl:stylesheet> - Wewnątrz głównego znacznika XSL dodaj znacznik szablonu . W tym miejscu możesz dodać niestandardowy kod HTML, aby wyświetlać i stylizować dane XML.
<xsl:template match="/">
<html>
<body>
// Your HTML code in here
</body>
</html>
</xsl:template> - Wewnątrz tagu body użyj selektora xsl:for-each . Będzie to działać jako pętla for, która przejdzie przez każdy tag gry zagnieżdżony pod tagiem games .
<xsl:for-each select="games/game">
</xsl:for-each> - Wewnątrz pętli for-each wyświetl nazwę i punkty danych programisty, korzystając z selektora znaczników xsl:value-of .
<xsl:value-of select="name" />
<xsl:value-of select="developer" />
Jak wyświetlić dane na stronie HTML
Nie będzie można otworzyć pliku XSLT lub XML bezpośrednio w przeglądarce, aby wyświetlić dane jako część strony internetowej. Utwórz nowy plik HTML i wyrenderuj dane przy użyciu tagu iframe .
- W tym samym folderze, co pliki XML i XSL, utwórz nowy plik o nazwie index.html .
- Dodaj podstawową strukturę pliku HTML. Jeśli nie korzystałeś wcześniej z języka HTML, możesz odświeżyć podstawowe pojęcia dotyczące języka HTML.
<!DOCTYPE html>
<html>
<head>
<title>XML and XSLT Example</title>
</head>
<body>
</body>
</html> - Wewnątrz tagu body użyj tagu iframe , aby połączyć plik XML i plik XSL:
<h1>XML and XSLT Example</h1>
<p>The following content is generated from an XML file:</p>
<iframe src="data.xml" xslt="xmlstylesheet.xsl"></iframe> - Utwórz nowy plik o nazwie styles.css .
- Wewnątrz pliku dodaj kod CSS, aby nadać styl swojej stronie internetowej. Możesz swobodnie modyfikować swój CSS, korzystając z innych interesujących wskazówek i sztuczek CSS.
html,
body {
height: 100%;
margin: 0;
}body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}p {
margin-bottom: 24px;
} - Połącz swój plik HTML ze stylem CSS, dodając następujący element do tagu head HTML.
<link rel="stylesheet" href="styles.css"> - Otwórz plik HTML za pomocą przeglądarki, aby wyświetlić dane XML. Niektóre przeglądarki nie obsługują XSLT, ale niektóre przeglądarki, takie jak Firefox, obsługują.
Wyświetl dane na stronach HTML
Istnieje wiele sposobów wyświetlania danych na stronach HTML, a XML i XSLT są jednymi z nich. Zachęcamy do zapoznania się z innymi sposobami, w jakie można to zrobić, takimi jak przechowywanie i wyświetlanie danych wprowadzonych przez użytkownika przy użyciu języka JavaScript.
Dodaj komentarz