在浏览器中显示xml和xslt

时间:2014-12-12 19:32:03

标签: html xml xslt xslt-1.0

我有两个文件,即file.xml和file.xsl。我正在寻找如何在浏览器中查看结果。从我的研究中我了解到,只有IE有一个xml解析器,而对于其他浏览器,我需要一个servor脚本。 我还将这些行放在我的xml文件的顶部:

 <?xml version="1.0" encoding="UTF-8"?>
 <?xml-stylesheet type="text/xsl" href="Employe.xsl"?>

和我的xsl文件顶部的这些lignes:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

然而,即使我使用IE(11),我也只有没有任何风格的文字。 我想在表格中显示元素但是没有。

如果我找不到任何错误,我会把你的代码给你,但是正常情况下这是错的。

这是xsl代码:

<xsl:template match="/">
<html>
<body>

    <h2>List of Workers</h2>
    <table border="1">
        <tr bgcolor="#9acd32">
            <th rowspan=3> ID </th>
            <th colspan=5> Basic Information </th>
            <th rowspan=3> Picture </th>
            <th colspan=2> Skills enable </th>
        </tr>
        <tr>
            <td rowspan=2> Name </td>
            <td colspan=3> Address </td>
            <td rowspan=2> Phone Number </td>
            <td rowspan=2> Skill 1 </td>
            <td rowspan=2> Skill 2 </td>
        </tr>
        <tr>
            <td> Number </td>
            <td> Street </td>
            <td> Town </td>
        </tr>
        <xsl:for-each select="List_Of_Employe/Employe">
        <xsl:sort select="Name"/>
        <tr>
            <td><xsl:value-of select="ID"/></td>
            <td><xsl:value-of select="Basic_Information/Name"/></td>
            <td><xsl:value-of select="Basic_Information/Address/Number"/></td>
            <td><xsl:value-of select="Basic_Information/Address/Street"/></td>
            <td><xsl:value-of select="Basic_Information/Address/Town"/></td>
            <td><xsl:value-of select="Basic_Information/Phone_Number"/><td/>
            <td><xsl:value-of select="Photo"/></td>
            <td><xsl:value-of select="Skills_Enable/Skill_1"/></td>
            <td><xsl:value-of select="Skills_Enable/Skill_2"/></td>
        </tr>
        </xsl:for-each>
    </table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

这是我的xml代码:

<List_Of_Employe>



    <Employe>

        <ID> 1235 </ID>

        <Basic_Information>

            <Name> James Bond</Name>

            <Address>
                <Number > 05 </Number>
                <Street> Queen's street </Street>
                <Town> London </Town>
            </Address>

            <Phone_Number> 07876543210 </Phone_Number>

        </Basic_Information>

        <Photo> James.png </Photo>

        <Skills_Enable>
            <Skill_1> XML </Skill_1>
            <Skill_2> C# </Skill_2>
        </Skills_Enable>

    </Employe>

    <Employe>

        <ID> 1236 </ID>

        <Basic_Information>

            <Name> Sherlock Holmes </Name>

            <Address>
                <Number > 100 </Number>
                <Street> Prince's street </Street>
                <Town> London </Town>
            </Address>

            <Phone_Number> 07765432100 </Phone_Number>

        </Basic_Information>

        <Photo> Sherlock.png </Photo>

        <Skills_Enable>
            <Skill_1> JavaScript </Skill_1>
            <Skill_2> Python </Skill_2>
        </Skills_Enable>

    </Employe>


 </List_Of_Employe>

希望你能帮助我

Mayeul

1 个答案:

答案 0 :(得分:0)

您的样式表需要一些改进,但您的解决方案并不遥远。它不是一个漂亮的解决方案,但它成功地转换了您的输入XML。 (更好的解决方案是使用多个模板,而不是使用多个for-each语句的大模板。

清理一些事情

你说:

  

从我的研究中我了解到只有IE有一个xml解析器,而对于其他浏览器我需要一个servor脚本

不,那不是真的。每个主流浏览器都有一个不错的XML解析器。您不需要任何服务器端代码来解析XML。同样,每个主流浏览器(IE,Chrome,Firefox,Safari)都附带一个XSLT处理器,但只支持XSLT 1.0。

  

然而,即使我使用IE(11),我也只有没有任何风格的文字。

除了转换结果中的输入XML中的所有文本内容之外,通常意味着:您的模板都不能匹配输入元素。您的代码均未应用,并且采取了默认操作:调用仅输出所有文本节点的内置模板。

我不清楚为什么在您的情况下不应该使用模板,请告诉我下面建议的样式表是否会改变输出。

<强>样式表

我对您的样式表进行了以下更改:

  • 有一个迷路<td/>应为</td>,因为它会结束td元素。
  • 为所有属性值添加了引号。属性值绝对需要在引号("...")中,因为XSLT代码本身必须是格式良好的XML。

HTML解析器可以处理很多错误(例如,不带引号的属性值),但XML解析器对此非常严格。

<?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>
<body>

    <h2>List of Workers</h2>
    <table border="1">
        <tr bgcolor="#9acd32">
            <th rowspan="3"> ID </th>
            <th colspan="5"> Basic Information </th>
            <th rowspan="3"> Picture </th>
            <th colspan="2"> Skills enable </th>
        </tr>
        <tr>
            <td rowspan="2"> Name </td>
            <td colspan="3"> Address </td>
            <td rowspan="2"> Phone Number </td>
            <td rowspan="2"> Skill 1 </td>
            <td rowspan="2"> Skill 2 </td>
        </tr>
        <tr>
            <td> Number </td>
            <td> Street </td>
            <td> Town </td>
        </tr>
        <xsl:for-each select="List_Of_Employe/Employe">
        <xsl:sort select="Name"/>
        <tr>
            <td><xsl:value-of select="ID"/></td>
            <td><xsl:value-of select="Basic_Information/Name"/></td>
            <td><xsl:value-of select="Basic_Information/Address/Number"/></td>
            <td><xsl:value-of select="Basic_Information/Address/Street"/></td>
            <td><xsl:value-of select="Basic_Information/Address/Town"/></td>
            <td><xsl:value-of select="Basic_Information/Phone_Number"/></td>
            <td><xsl:value-of select="Photo"/></td>
            <td><xsl:value-of select="Skills_Enable/Skill_1"/></td>
            <td><xsl:value-of select="Skills_Enable/Skill_2"/></td>
        </tr>
        </xsl:for-each>
    </table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

另外,请考虑在样式表中添加以下行:

<xsl:output method="html" indent="yes"/>

明确表示您想要输出HTML。

XHTML输出

<html>
   <body>
      <h2>List of Workers</h2>
      <table border="1">
         <tr bgcolor="#9acd32">
            <th rowspan="3"> ID </th>
            <th colspan="5"> Basic Information </th>
            <th rowspan="3"> Picture </th>
            <th colspan="2"> Skills enable </th>
         </tr>
         <tr>
            <td rowspan="2"> Name </td>
            <td colspan="3"> Address </td>
            <td rowspan="2"> Phone Number </td>
            <td rowspan="2"> Skill 1 </td>
            <td rowspan="2"> Skill 2 </td>
         </tr>
         <tr>
            <td> Number </td>
            <td> Street </td>
            <td> Town </td>
         </tr>
         <tr>
            <td> 1235 </td>
            <td> James Bond</td>
            <td> 05 </td>
            <td> Queen's street </td>
            <td> London </td>
            <td> 07876543210 </td>
            <td> James.png </td>
            <td> XML </td>
            <td> C# </td>
         </tr>
         <tr>
            <td> 1236 </td>
            <td> Sherlock Holmes </td>
            <td> 100 </td>
            <td> Prince's street </td>
            <td> London </td>
            <td> 07765432100 </td>
            <td> Sherlock.png </td>
            <td> JavaScript </td>
            <td> Python </td>
         </tr>
      </table>
   </body>
</html>

呈现输出

我没有IE在那里尝试,但Firefox将HTML输出呈现为:

  

enter image description here

最后,让我挑剔一下,它真的应该阅读&#34;员工&#34;而不是&#34;员工&#34;。

相关问题