XSLT‑Beispiel - XSLT‑Tutorial

Vollständiges Beispiel: Umwandlung von XML + XSLT nach HTML

Bereiten Sie zwei Dateien vor:

students.xml: Original‑XML‑Dokument zur Speicherung von Schülerdaten
transform.xsl: XSL‑Stylesheet zur Umwandlung von XML in eine HTML‑Seite
Wenn der Browser students.xml lädt, wendet er automatisch die XSLT‑Regeln an und rendert die Webseite.

Verwendet die XML‑Datei die Kodierung ISO‑8859‑1 (westeuropäischer Zeichensatz), lassen sich nicht‑englische Texte unter Umständen nicht korrekt speichern, was direkt zu Zeichensalat führt. Passen Sie die Kodierung im Code einheitlich auf UTF‑8 an, um das Problem vollständig zu beseitigen.

students.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
<class>
    <student>
        <name>Tom</name>
        <age>12</age>
        <height>145</height>
    </student>
    <student>
        <name>Jack</name>
        <age>16</age>
        <height>175</height>
    </student>
    <student>
        <name>Smiths</name>
        <age>22</age>
        <height>245</height>
    </student>
</class>Code-Sprache: HTML, XML (xml)

Wichtige Hinweise:

<?xml-stylesheet ... ?>‑Verarbeitungsanweisung: weist den Browser an, transform.xsl zur Umwandlung des aktuellen XML‑Dokuments zu verwenden
encoding="UTF-8" unterstützt Zeichen aller Sprachen und verhindert Zeichensalat

transform.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title>Student List</title>
            </head>
            <body>
                <h3>Student Name List</h3>
                <ul>
                    <!-- Durchlaufen aller class/student‑Knoten -->
                    <xsl:for-each select="class/student">
                        <li>
                            <xsl:value-of select="name"/>
                        </li>
                    </xsl:for-each>
                </ul>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>Code-Sprache: HTML, XML (xml)

Erklärung der zentralen Syntax

<xsl:stylesheet>: XSLT‑Wurzelelement, zur Deklaration des Namensraums
<xsl:template match="/">: trifft auf den XML‑Wurzelknoten zu, Einstiegspunkt der Umwandlung
<xsl:for-each select="class/student">: durchläuft jeden einzelnen Schüler‑Knoten
<xsl:value-of select="name"/>: extrahiert den Textinhalt des Knotens <name>

3. Ausführungsweise

Legen Sie beide Dateienin demselben Ordner ab
Öffnen Sie students.xml direkt im Webbrowser
Die XSLT‑Engine führt die Umwandlung automatisch durch und erzeugt abschließend eine gerenderte HTML‑Listen‑Seite

Auftreten von Zeichensalat

Im XML‑Kopf ist encoding="ISO‑8859‑1" angegeben, dieser Zeichensatz unterstützt keine nicht‑englischen Zeichen;
Die im HTML‑Meta‑Tag angegebene Kodierung stimmt nicht mit der tatsächlichen Dateikodierung überein;
Beim Speichern der Datei verwendet der Editor nicht die UTF‑8‑Kodierung;

Anzeige vollständiger Schülerdaten

Wenn Sie Name, Alter und Körpergröße gleichzeitig anzeigen möchten, ersetzen Sie den Schleifenbereich:

<xsl:for-each select="class/student">
    <li>
        Name: <xsl:value-of select="name"/> ,
        Alter: <xsl:value-of select="age"/> ,
        Körpergröße: <xsl:value-of select="height"/>
    </li>
</xsl:for-each>Code-Sprache: HTML, XML (xml)

XSLT‑Beispiel

Previous: Einführung

Next: Schleife