学习 XSLT:XML文档转换的关键

XSL(eXtensible Stylesheet Language)是一种用于 XML 的样式语言。

XSL(T) 语言

XSLT 是一种用于转换 XML 文档的语言。

XPath 是一种用于在 XML 文档中导航的语言。

XQuery 是一种用于查询 XML 文档的语言。

它始于 XSL

XSL 代表 EXtensible Stylesheet Language

CSS = HTML 的样式表

HTML 使用预定义标签。每个标签的含义以及如何显示已经被充分理解。

CSS 用于向 HTML 元素添加样式。

XSL = XML 的样式表

XML 不使用预定义标签,因此每个标签的含义并不是很清楚。

一个 <table> 元素可能表示 HTML 表格、一件家具或其他东西 - 浏览器不知道如何显示它!

因此,XSL 描述了 XML 元素应如何显示。

XSL - 不仅仅是样式表语言

XSL 由四个部分组成:

  • XSLT - 用于转换 XML 文档的语言
  • XPath - 用于在 XML 文档中导航的语言
  • XSL-FO - 用于格式化 XML 文档的语言(已于 2013 年停用)
  • XQuery - 用于查询 XML 文档的语言

示例

xml 复制代码
<?xml version="1.0"?>

<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="catalog/cd">
        <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>

什么是 XSLT

XSLT 代表 XSL Transformations

XSLT 是 XSL 中最重要的部分

XSLT 将 XML 文档转换为另一个 XML 文档

XSLT 使用 XPath 在 XML 文档中导航

XSLT = XSL 转换

XSLT 是 XSL 中最重要的部分。

XSLT 用于将 XML 文档转换为另一个 XML 文档,或者由浏览器识别的其他类型的文档,如 HTML 和 XHTML。通常,XSLT 通过将每个 XML 元素转换为(X)HTML 元素来实现此目的。

使用 XSLT,您可以向输出文件添加/删除元素和属性。您还可以重新排列和排序元素,执行测试并根据需要隐藏和显示元素,以及进行更多操作。

描述转换过程的一种常见方式是说,XSLT 将 XML 源树转换为 XML 结果树。

XSLT 使用 XPath

XSLT 使用 XPath 在 XML 文档中查找信息。XPath 用于在 XML 文档中导航元素和属性。

它是如何工作的

在转换过程中,XSLT 使用 XPath 定义应与一个或多个预定义模板匹配的源文档的部分。当找到匹配时,XSLT 将源文档的匹配部分转换为结果文档。

XSLT 浏览器支持

所有主要浏览器都支持 XSLT 和 XPath

正确的样式表声明

声明文档为 XSL 样式表的根元素是 <xsl:stylesheet><xsl:transform>

注意:<xsl:stylesheet><xsl:transform> 完全是同义词,可以使用任一种

要访问 XSLT 元素、属性和特性,我们必须在文档顶部声明 XSLT 命名空间。

从原始 XML 文档开始

以下 XML 文档("cdcatalog.xml")转换为 XHTML:

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
</catalog>

在浏览器中查看 XML 文件:打开 XML 文件(单击下面的链接)- XML 文档将以带颜色的根和子元素显示。通常,元素左侧会有一个箭头或加号/减号符号,点击它可以展开或折叠元素结构。提示:要查看原始 XML 源代码,请右键单击 XML 文件,然后选择"查看页面源代码"!

创建 XSL 样式表

然后,您可以创建一个 XSL 样式表("cdcatalog.xsl"),其中包含一个转换模板

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>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <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>

将 XSL 样式表链接到 XML 文档

将 XSL 样式表引用添加到您的 XML 文档("cdcatalog.xml")中:

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
</catalog>

如果您的浏览器支持 XSLT,它将会将您的 XML 优雅地转换为 XHTML

XSLT <xsl:template> 元素

一个 XSL 样式表由一个或多个称为模板的规则集组成。

模板包含在匹配指定节点时应用的规则。

<xsl:template> 元素

<xsl:template> 元素用于构建模板。

match 属性用于将模板与 XML 元素关联起来。match 属性还可以用于为整个 XML 文档定义模板。match 属性的值是一个 XPath 表达式(即 match="/" 定义整个文档)

示例

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>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <tr>
      <td>.</td>
      <td>.</td>
    </tr>
  </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

示例解释

由于 XSL 样式表是一个 XML 文档,因此它始终以 XML 声明开头:<?xml version="1.0" encoding="UTF-8"?>

接下来的元素 <xsl:stylesheet> 定义了此文档是一个 XSLT 样式表文档(连同版本号和 XSLT 命名空间属性)。

<xsl:template> 元素定义了一个模板。match="/" 属性将模板与 XML 源文档的根关联起来。

<xsl:template> 元素内部的内容定义了要写入输出的一些 HTML。

最后两行定义了模板的结束和样式表的结束。

这个示例的结果有点令人失望,因为没有将任何数据从 XML 文档复制到输出中。在下一章中,您将学习如何使用 <xsl:value-of> 元素从 XML 元素中选择值。

XSLT <xsl:value-of> 元素

<xsl:value-of> 元素用于提取所选节点的值。

<xsl:value-of> 元素

<xsl:value-of> 元素可用于提取 XML 元素的值,并将其添加到转换的输出流中:

示例

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

</xsl:stylesheet>

示例解释

注意:在上面的示例中,select 属性包含一个 XPath 表达式。XPath 表达式的工作方式类似于导航文件系统;斜杠 (/) 选择子目录。

上面示例的结果有点令人失望;只有一行数据从 XML 文档复制到输出中。在下一章中,您将学习如何使用 <xsl:for-each> 元素循环遍历 XML 元素,并显示所有记录。

XSLT <xsl:for-each> 元素

<xsl:for-each> 元素允许您在 XSLT 中进行循环。

<xsl:for-each> 元素

XSL <xsl:for-each> 元素可用于选择指定节点集的每个 XML 元素:

示例

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>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <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>

注意:select 属性的值是一个 XPath 表达式。XPath 表达式的工作方式类似于导航文件系统;斜杠 (/) 选择子目录。

筛选输出

我们还可以通过向 <xsl:for-each> 元素的 select 属性添加条件来对 XML 文件中的输出进行筛选。

xml 复制代码
<xsl:for-each select="catalog/cd[artist='Bob Dylan']">

合法的筛选操作符有:

  • =(等于)
  • !=(不等于)
  • <(小于)
  • >(大于)

看看调整后的 XSL 样式表:

示例

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>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd[artist='Bob Dylan']">
    <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>

XSLT <xsl:sort> 元素

<xsl:sort> 元素用于对输出进行排序。

排序信息放在哪里

要对输出进行排序,只需在 XSL 文件的 <xsl:for-each> 元素内部添加一个 <xsl:sort> 元素:

示例

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>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
      <xsl:sort select="artist"/>
      <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>

注意:select 属性指示要排序的 XML 元素。

XSLT <xsl:if> 元素

<xsl:if> 元素用于根据 XML 文件的内容进行条件测试。

<xsl:if> 元素

要对 XML 文件的内容进行条件 if 测试,请将 <xsl:if> 元素添加到 XSL 文档中。

语法

xml 复制代码
<xsl:if test="expression">
  ... 如果表达式为真,则输出一些内容...
</xsl:if>

<xsl:if> 元素放在哪里

要添加条件测试,请在 XSL 文件中的 <xsl:for-each> 元素内部添加 <xsl:if> 元素:

示例

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>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
      <th>Price</th>
    </tr>
    <xsl:for-each select="catalog/cd">
      <xsl:if test="price &gt; 10">
        <tr>
          <td><xsl:value-of select="title"/></td>
          <td><xsl:value-of select="artist"/></td>
          <td><xsl:value-of select="price"/></td>
        </tr>
      </xsl:if>
    </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

注意:所需 test 属性的值包含要评估的表达式。

上面的代码只会输出价格高于 10 的 CD 的标题和艺术家元素。

XSLT <xsl:choose> 元素

<xsl:choose> 元素与 <xsl:when><xsl:otherwise> 结合使用,用于表达多个条件测试。

<xsl:choose> 元素

语法

xml 复制代码
<xsl:choose>
  <xsl:when test="expression">
    ... 一些输出 ...
  </xsl:when>
  <xsl:otherwise>
    ... 一些输出 ....
  </xsl:otherwise>
</xsl:choose>

选择条件的放置位置

要对 XML 文件进行多个条件测试,请将 <xsl:choose><xsl:when><xsl:otherwise> 元素添加到 XSL 文件中:

示例

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>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <xsl:choose>
        <xsl:when test="price &gt; 10">
          <td bgcolor="#ff00ff">
          <xsl:value-of select="artist"/></td>
        </xsl:when>
        <xsl:otherwise>
          <td><xsl:value-of select="artist"/></td>
        </xsl:otherwise>
      </xsl:choose>
    </tr>
    </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

上述代码将在 CD 的价格高于 10 时,为"Artist"列添加粉色背景颜色。

另一个示例

以下是包含两个 <xsl:when> 元素的另一个示例:

示例

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>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <xsl:choose>
        <xsl:when test="price &gt; 10">
          <td bgcolor="#ff00ff">
          <xsl:value-of select="artist"/></td>
        </xsl:when>
        <xsl:when test="price &gt; 9">
          <td bgcolor="#cccccc">
          <xsl:value-of select="artist"/></td>
        </xsl:when>
        <xsl:otherwise>
          <td><xsl:value-of select="artist"/></td>
        </xsl:otherwise>
      </xsl:choose>
    </tr>
    </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

上述代码将在 CD 的价格高于 10 时为"Artist"列添加粉色背景颜色,并在 CD 的价格高于 9 且低于或等于 10 时为其添加灰色背景颜色。

XSLT <xsl:apply-templates> 元素

<xsl:apply-templates> 元素将一个模板规则应用于当前元素或当前元素的子节点。

<xsl:apply-templates> 元素将一个模板应用于当前元素或当前元素的子节点。

如果我们给 <xsl:apply-templates> 元素添加一个 "select" 属性,它将仅处理与属性值匹配的子元素。我们可以使用 "select" 属性来指定子节点的处理顺序。

请看下面的 XSL 样式表:

示例

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>My CD Collection</h2>
  <xsl:apply-templates/>
  </body>
  </html>
</xsl:template>

<xsl:template match="cd">
  <p>
  <xsl:apply-templates select="title"/>
  <xsl:apply-templates select="artist"/>
  </p>
</xsl:template>

<xsl:template match="title">
  Title: <span style="color:#ff0000">
  <xsl:value-of select="."/></span>
  <br />
</xsl:template>

<xsl:template match="artist">
  Artist: <span style="color:#00ff00">
  <xsl:value-of select="."/></span>
  <br />
</xsl:template>

</xsl:stylesheet>

XSLT - 在客户端

XSLT 可以用于在您的浏览器中将文档转换为 XHTML。通过向 XML 文件添加 XSL 样式表并让浏览器执行转换来实现这一点。即使这种方法运行良好,但并不总是希望在 XML 文件中包含样式表引用(例如,在非 XSLT 感知的浏览器中无法工作)。

一个更加灵活的解决方案是使用 JavaScript 来进行转换。

通过使用 JavaScript,我们可以:

  • 进行浏览器特定的测试
  • 根据浏览器和用户需求使用不同的样式表

这就是 XSLT 的美妙之处!XSLT 的一个设计目标是使其能够将数据从一种格式转换为另一种格式,支持不同的浏览器和不同的用户需求。

XML 文件和 XSL 文件

查看您在前几章中看到的 XML 文档:

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
</catalog>

查看 XML 文件

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="/">
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:left">Title</th>
      <th style="text-align:left">Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title" /></td>
      <td><xsl:value-of select="artist" /></td>
    </tr>
    </xsl:for-each>
  </table>
</xsl:template>

</xsl:stylesheet>

在浏览器中将 XML 转换为 XHTML

以下是在客户端将 XML 文件转换为 XHTML 所需的源代码:

示例

html 复制代码
<!DOCTYPE html>
<html>
<head>
<script>
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) {}
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.xsl");
// IE 浏览器的代码
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
  {
  ex = xml.transformNode(xsl);
  document.getElementById("example").innerHTML = ex;
  }
// Chrome、Firefox、Opera 等其他浏览器的代码
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml, document);
  document.getElementById("example").appendChild(resultDocument);
  }
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>

示例解释

loadXMLDoc() 函数执行以下操作:

  • 创建一个 XMLHttpRequest 对象
  • 使用 XMLHttpRequest 对象的 open() 和 send() 方法向服务器发送请求
  • 获取响应数据作为 XML 数据

displayResult() 函数用于显示由 XSL 文件样式化的 XML 文件:

  • 加载 XML 和 XSL 文件
  • 测试用户使用的浏览器类型
  • 如果是 Internet Explorer:
    • 使用 transformNode() 方法将 XSL 样式表应用于 xml 文档
    • 将当前文档的 body(id="example")设置为包含样式化的 xml 文档
  • 如果是其他浏览器:
    • 创建一个新的 XSLTProcessor 对象并将 XSL 文件导入其中
    • 使用 transformToFragment() 方法将 XSL 样式表应用于 xml 文档
    • 将当前文档的 body(id="example")设置为包含样式化的 xml 文档

XSLT - 在服务器端

为了使 XML 数据对所有类型的浏览器都可用,我们可以在服务器上转换 XML 文档,并将其作为 XHTML 发送回浏览器。

一个跨浏览器解决方案

在前一章中,我们解释了如何使用 XSLT 在浏览器中将文档从 XML 转换为 XHTML。我们使用了 JavaScript 和 XML 解析器进行转换。但是,在没有 XML 解析器的浏览器中,这种方法将无法工作。

为了使 XML 数据对所有类型的浏览器都可用,我们可以在服务器上转换 XML 文档,并作为 XHTML 发送回浏览器。

这是 XSLT 的另一个美妙之处。XSLT 的一个设计目标是使其能够在服务器上将数据从一种格式转换为另一种格式,向所有类型的浏览器返回可读数据。

XML 文件和 XSLT 文件

查看您在前几章中看到的 XML 文档:

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
</catalog>

查看 XML 文件

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="/">
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:left">Title</th>
      <th style="text-align:left">Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title" /></td>
      <td><xsl:value-of select="artist" /></td>
    </tr>
    </xsl:for-each>
  </table>
</xsl:template>

</xsl:stylesheet>

以下是在服务器上将 XML 文件转换为 XHTML 所需的 PHP 源代码

php 复制代码
<?php
// 加载 XML 文件
$xml = new DOMDocument;
$xml->load('cdcatalog.xml');

// 加载 XSL 文件
$xsl = new DOMDocument;
$xsl->load('cdcatalog.xsl');

// 配置转换器
$proc = new XSLTProcessor;

// 附加 xsl 规则
$proc->importStyleSheet($xsl);

echo $proc->transformToXML($xml);
?>

以下是在服务器上将 XML 文件转换为 XHTML 所需的 ASP 源代码

asp 复制代码
<%
'加载 XML 文件
set xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load(Server.MapPath("cdcatalog.xml"))

'加载 XSL 文件
set xsl = Server.CreateObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load(Server.MapPath("cdcatalog.xsl"))

'转换文件
Response.Write(xml.transformNode(xsl))
%>

XSLT - 编辑 XML

存储在 XML 文件中的数据可以从 Internet 浏览器中进行编辑。

打开、编辑和保存 XML

现在,我们将展示如何打开、编辑和保存存储在服务器上的 XML 文件。

我们将使用 XSL 来将 XML 文档转换为 HTML 表单。 XML 元素的值将写入 HTML 表单中的 HTML 输入字段中。 HTML 表单是可编辑的。 编辑数据后,数据将被提交回服务器,XML 文件将被更新(我们将显示 PHP 和 ASP 的代码)。

XML 文件和 XSL 文件

首先,看一下 XML 文档("tool.xml"):

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<tool>
  <field id="prodName">
    <value>HAMMER HG2606</value>
  </field>
  <field id="prodNo">
    <value>32456240</value>
  </field>
  <field id="price">
    <value>$30.00</value>
  </field>
</tool>

然后,看一下以下样式表("tool.xsl")

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>
  <form method="post" action="edittool.asp">
  <h2>工具信息(编辑):</h2>
  <table border="0">
    <xsl:for-each select="tool/field">
    <tr>
      <td><xsl:value-of select="@id"/></td>
      <td>
      <input type="text">
      <xsl:attribute name="id">
        <xsl:value-of select="@id" />
      </xsl:attribute>
      <xsl:attribute name="name">
        <xsl:value-of select="@id" />
      </xsl:attribute>
      <xsl:attribute name="value">
        <xsl:value-of select="value" />
      </xsl:attribute>
      </input>
      </td>
    </tr>
    </xsl:for-each>
  </table>
  <br />
  <input type="submit" id="btn_sub" name="btn_sub" value="Submit" />
  <input type="reset" id="btn_res" name="btn_res" value="Reset" />
  </form>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

上面的 XSL 文件循环遍历 XML 文件中的元素,并为每个 XML "field" 元素创建一个输入字段。 XML "field" 元素的 "id" 属性的值被添加到每个 HTML 输入字段的 "id" 和 "name" 属性中。 每个 XML "value" 元素的值被添加到每个 HTML 输入字段的 "value" 属性中。 结果是一个可编辑的 HTML 表单,其中包含来自 XML 文件的值。

然后,我们有第二个样式表:"tool_updated.xsl"。 这是将用于显示更新的 XML 数据的 XSL 文件。 这个样式表不会导致可编辑的 HTML 表单,而是静态的 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>更新的工具信息:</h2>
  <table border="1">
    <xsl:for-each select="tool/field">
    <tr>
      <td><xsl:value-of select="@id" /></td>
      <td><xsl:value-of select="value" /></td>
    </tr>
    </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>

在上面的 "tool.xsl" 文件中,将 HTML 表单的 action 属性更改为 "edittool.php"。

"edittool.php" 页面包含两个函数:loadFile() 函数加载和转换 XML 文件以供显示,updateFile() 函数将更改应用于 XML 文件:

php 复制代码
<?php
function loadFile($xml, $xsl)
{
$xmlDoc = new DOMDocument();
$xml

Doc->load($xml);

$xslDoc = new DOMDocument();
$xslDoc->load($xsl);

$proc = new XSLTProcessor();
$proc->importStyleSheet($xslDoc);
echo $proc->transformToXML($xmlDoc);
}

function updateFile($xml)
{
$xmlLoad = simplexml_load_file($xml);
$postKeys = array_keys($_POST);

foreach($xmlLoad->children() as $x)
{
  foreach($_POST as $key=>$value)
  {
    if($key == $x->attributes())
    {
      $x->value = $value;
    }
  }
}

$xmlLoad->asXML($xml);
loadFile($xml,"tool_updated.xsl");
}

if($_POST["btn_sub"] == "")
{
  loadFile("tool.xml", "tool.xsl");
}
else
{
  updateFile("tool.xml");
}
?>

注意: 我们正在服务器上进行转换并将更改应用于 XML 文件。 这是一个跨浏览器解决方案。 客户端将只从服务器收到 HTML - 这将在任何浏览器中工作。

ASP 文件

在上面的 "tool.xsl" 文件中,HTML 表单的 action 属性的值为 "edittool.asp"。

"edittool.asp" 页面包含两个函数:loadFile() 函数加载和转换 XML 文件以供显示,updateFile() 函数将更改应用于 XML 文件:

asp 复制代码
<%
function loadFile(xmlfile,xslfile)
Dim xmlDoc,xslDoc
'Load XML and XSL file
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async = false
xmlDoc.load(xmlfile)
set xslDoc = Server.CreateObject("Microsoft.XMLDOM")
xslDoc.async = false
xslDoc.load(xslfile)
'Transform file
Response.Write(xmlDoc.transformNode(xslDoc))
end function

function updateFile(xmlfile)
Dim xmlDoc,rootEl,f
Dim i
'Load XML file
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async = false
xmlDoc.load(xmlfile)

'Set the rootEl variable equal to

 the root element
Set rootEl = xmlDoc.documentElement

'Loop through the form collection
for i = 1 To Request.Form.Count
  'Eliminate button elements in the form
  if instr(1,Request.Form.Key(i),"btn_")=0 then
    'The selectSingleNode method queries the XML file for a single node
    'that matches a query. This query requests the value element that is
    'the child of a field element that has an id attribute which matches
    'the current key value in the Form Collection. When there is a match -
    'set the text property equal to the value of the current field in the
    'Form Collection.
    set f = rootEl.selectSingleNode("field[@id='" & _
    Request.Form.Key(i) & "']/value")
    f.Text = Request.Form(i)
  end if
next

'Save the modified XML file
xmlDoc.save xmlfile

'Release all object references
set xmlDoc=nothing
set rootEl=nothing
set f=nothing

'Load the modified XML file with a style sheet that
'allows the client to see the edited information
loadFile xmlfile,server.MapPath("tool_updated.xsl")
end function

'If form is submitted, update the XML file and display result
' - if not, transform the XML file for editing
if Request.Form("btn_sub")="" then
  loadFile server.MapPath("tool.xml"),server.MapPath("tool.xsl")
else
  updateFile server.MapPath("tool.xml")
end if
%>

最后

为了方便其他设备和平台的小伙伴观看往期文章:

微信公众号搜索:Let us Coding,关注后即可获取最新文章推送

看完如果觉得有帮助,欢迎点赞、收藏、关注

相关推荐
LKAI.20 分钟前
搭建Elastic search群集
linux·运维·elasticsearch·搜索引擎
dlnu201525062222 分钟前
ssr实现方案
前端·javascript·ssr
古木201926 分钟前
前端面试宝典
前端·面试·职场和发展
gywl2 小时前
openEuler VM虚拟机操作(期末考试)
linux·服务器·网络·windows·http·centos
轻口味2 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王3 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发3 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀3 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
日记跟新中3 小时前
Ubuntu20.04 修改root密码
linux·运维·服务器