Question

编辑：以上类似的问题不是我要找的。我试图将转换后的结果转换为我的html文档。

我正在关注本教程：http://www.w3schools.com/xsl/xsl_client.asp

我有一个HTML页面。我想使用XML文件中的数据创建HTML，并使用XSLT对其进行样式化，方法是使用javascript从服务器读取XML和XSLT文件。

HTML页面：

<html>
    <head>
        <script type="text/javascript" src="/scripts/onload.js"></script>
    </head>
    <body onload="displayResult()">
        <div id="example" />
    </body>
</html>

使用Javascript：

function loadXMLDoc(filename)
{
if (window.ActiveXObject)
  {
  xhttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
else 
  {
  xhttp = new XMLHttpRequest();
  }
xhttp.open("GET", filename, false);
try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
var location = document.URL;
var xmlLocation = location +"myXMl.xml";

xml = loadXMLDoc(xmlLocation);
xsl = loadXMLDoc("style.xsl");
// code for IE
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
  {
  ex = xml.transformNode(xsl);
  document.getElementById("example").innerHTML = ex;
  }
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml, document);
  document.getElementById("example").appendChild(resultDocument);
  }
}

XSLT文件：

<?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>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="movie">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

xml文件并不特别 - 因为它只包含CD的信息等。

我感到困惑，因为它看起来像是＆＃34;插入＆＃34;将XSLT输出到＆＃34;示例＆＃34; div已body html。但是XSLT已经定义了html，head和body个节点。所以我在技术上不会在<html>内放置<div id="example" />节点，并且不应该导致错误的html？（嵌套html标签）？当我在safari中查看控制台时，DOM看起来很正常（只有一组html，head，body等等。那么发生了什么？我是否误解了{ {1}}有效吗？

Answer 1

您没有误解XSLT的工作原理。代码将html和body个节点放在div元素中。只是浏览器可能选择在那时忽略它们而不是将它们添加到DOM中。

因此，W3Schools的例子可能非常具有误导性。 XSLT不应该包含html和body标记。如果您在XML中使用<?xml-stylesheet处理指令，只需在浏览器中将XML显示为HTML（例如，如http://www.w3schools.com/xsl/xsl_transformation.asp所示），您就真的需要它们。

Answer 2

你可以将XSLT中给出的html标签作为一些虚拟标签，如果你不想使用它们，你可以删除它们。

只需将XSLT修改为以下。

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="movie">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
  </table>
</xsl:template>
</xsl:stylesheet>

仍然可以获得主html，head和body tags。

如何使用XSLT和javascript从XML创建HTML？

2 个答案: