将特定的 XML 节点拉入 HTML 文档答案

【问题标题】：Pull specific XML node(s) into HTML document将特定的 XML 节点拉入 HTML 文档
【发布时间】：2011-03-10 20:26:12
【问题描述】：

第一次海报。请温柔一点。

这个主题可能与其他几个问题相似，但据我所知，这是我正在尝试解决的一个独特问题。 FWIW，我主要是一名设计师；我对 Flash、HTML 和 CSS 很危险，但对其他所有东西都有点杂草。通过四处搜索，我似乎正在寻找一个 ajax/jquery 解决方案，我需要一些帮助。

首先，我构建了一个相当复杂的 Flash 界面，它从格式良好且经过验证的 XML 文件中提取内容。这部分已经完成，效果很好。

但是，客户想要创建一个简单的（r）javsScript 版本的界面，以供没有 Flash 的观众使用。而且，他们希望此版本能够从 SAME XML 文件中提取值（文本），因此他们只需编辑一个文件即可进行更改。

似乎是一个合理的请求，但执行起来似乎并不那么简单。最大的障碍是我不想循环输出 XML - 我想将特定节点值调用到特定元素中。

这是我所能举出的最简单的例子。从 XML 像这样：

<section>
    <page>
        <name image="image1.jpg">Section One</name>
        <copy>This is a description of section one.</copy>
    </page>
    <page>
        <name image="image2.jpg">Section Two</name>
        <copy>This is a description of section two.</copy>
    </page>
</section>

我想像这样创建 HTML：

<div id="greenBackground">
    <h1>[value from 1st XML <name> node]</h1>
    <p>[value from 1st XML <copy> node]</p>
    <img src="[value from 1st XML <name> node image attribute]" />
</div>

<div id="blueBackground">
    <h1>[Value of 2nd XML <name> node]</h1>
    <p>[Value of 2nd XML <copy> node]</p>
    <img src="[value from 2nd XML <name> node image attribute]" />
</div>

他们的关键是每个 div 都有不同的 id，以便每个“页面”具有唯一的背景颜色和格式。我的想法是，我将使用一个简单的重叠 div 脚本来显示/隐藏同一足迹中的每个“部分”。

希望这是有道理的，请不要犹豫澄清。感谢您提供任何和所有帮助。

【问题讨论】：

标签： javascript jquery html xml ajax

【解决方案1】：

这是使用 PHP 完成转换的方法：

$proc=new XsltProcessor;  
$proc->importStylesheet(DOMDocument::load("stylesheet.xsl"));  
echo $proc->transformToXML(DOMDocument::load("data.xml"));

【讨论】：

【解决方案2】：

这是另一个版本。如果你这样做，我会觉得它更干净：

avoid <xsl:for-each/>（使用 XSLT 的模式匹配更符合习惯）
使用属性值模板（这些是attribute="{..}"）
您还应该设置<xsl:output/>，因为您正在生成 HTML（我假设为 4.0）

我假设您可以在输入中的 <page/> 元素上添加额外的属性 id（否则无处可获取您的 id！）

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0" indent="yes"/>

<xsl:template match="/">
    <html>
        <body><xsl:apply-templates/></body>
    </html>
</xsl:template>

<xsl:template match="page">
    <div id="{@id}">
        <h1><xsl:value-of select="name"/></h1>
        <p><xsl:value-of select="copy"/></p>
        <img src="{name/@image}"/>
    </div>
</xsl:template>

</xsl:stylesheet>

【讨论】：

感谢波热斯的回答。我也试试这个版本。

【解决方案3】：

听起来您正在尝试从 XML 转换为 HTML。为此，您可以使用一种称为 XSLT 的技术，但通常被许多人称为xslt transformation。您可以将 xslt 与 xpath（xml 的查询语言）结合使用，以完全按照您在问题中的描述进行操作。

这是 xml：（将 div id 添加到 xml）

<?xml version="1.0" encoding="utf-8"?>
<section>
    <page>
        <div id="greenBackground"></div>
        <name image="image1.jpg">Section One</name>
        <copy>This is a description of section one.</copy>
    </page>
    <page>
        <div id="blueBackground"></div>
        <name image="image2.jpg">Section Two</name>
        <copy>This is a description of section two.</copy>
    </page>
</section>

这里是 xslt：

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
    <body>
        <xsl:for-each select="section/page">
        <div>
            <xsl:attribute name="id">
                <xsl:value-of select="div//@id"/>
            </xsl:attribute>
            <h1>
                <xsl:value-of select="name"/>
            </h1>
            <p>
                <xsl:value-of select="copy"/>
            </p>
            <img>
                <xsl:attribute name="src">
                    <xsl:value-of select="name//@image"/>
                </xsl:attribute>
            </img>
            </div>
        </xsl:for-each>
    </body>
</html>
</xsl:template>
</xsl:stylesheet>

这是运行转换后的输出：

<html>
  <body>
    <div id="greenBackground">
      <h1>Section One</h1>
      <p>This is a description of section one.</p><img src="image1.jpg"></div>
    <div id="blueBackground">
      <h1>Section Two</h1>
      <p>This is a description of section two.</p><img src="image2.jpg"></div>
  </body>
</html>

享受吧！

【讨论】：

+1 用于使用旨在解决问题的技术，而不是强迫您想要使用的技术来打造丑陋、不直观、半途而废的解决方案.
谢谢道格。实际上，我已经玩过 XLST 并获得了一些有希望的结果，但对 xpath 一无所知/一无所知。会检查出来。没有足够的代表，否则我会给你 +1。
@Doug：我的 XSL 看起来非常熟悉！ ://
@Doug - 非常感谢您的帮助。在您的答案和下面的其他答案之间（它们非常相似，告诉我这是正确的方法！），我用 XSL 文件很好地获得了 XML 格式。我唯一缺少的部分是如何使用重叠的 div 脚本将 XLS 转换的 XML 带入我的 HTML 页面。也许这应该是一个单独的问题？
你能澄清一下你遇到了什么问题吗？听起来你正在做 xsl 转换并得到结果 html - 你是在页面之外进行转换吗？你用的是什么技术——直接html、php、asp、asp.net

【解决方案4】：

将您的 XML 更改为此（设置 div id 名称）：

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="web_page.xsl"?>
<section>
  <page>
    <div_id>greenBackground</div_id>
    <name image="image1.jpg">Section One</name>
    <copy>This is a description of section one.</copy>
  </page>
  <page>
    <div_id>blueBackground</div_id>
    <name image="image2.jpg">Section Two</name>
    <copy>This is a description of section two.</copy>
 </page>

此 XSL 将按照您要求的方式翻译您的 XML：

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

<xsl:template match="/">
  <html>
  <body>
    <xsl:for-each select="section/page">
    <div>
      <xsl:attribute name="id">
        <xsl:value-of select="div_id"/>
      </xsl:attribute>
      <h1><xsl:value-of select="name"/></h1>
      <p><xsl:value-of select="copy"/></p>
      <img>
        <xsl:attribute name="src">
          <xsl:value-of select="name//@image"/>
        </xsl:attribute>
      </img>
    </div>
  </xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

【讨论】：

感谢您的回答。您的 XSL 看起来确实与上面的 @Doug 非常相似，但两个几乎相同的答案让我觉得他们都在赚钱。
哈哈，这可能与 JohnB 在办公室坐在我旁边的事实有关 ;)