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

第一次张贴海报。请温柔。将特定的XML节点拉入HTML文档

此主题可能与其他几个问题类似，但据我所知，这是我试图解决的一个独特问题。 FWIW，我主要是设计师;我对Flash和HTML和CSS很危险，但在其他所有内容中都有一些杂草。从四处搜索，我似乎是前往ajax/jquery解决方案，我需要一些帮助。

首先，我已经构建了一个非常复杂的Flash接口，它从格式良好且经过验证的XML文件中提取内容。这部分完成，工作很好。

但是，客户想要为没有Flash的观看者创建一个简单的（r）javsScript版本的接口。并且，他们希望此版本从同一个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脚本来显示/隐藏每个这些“部分”在相同的足迹。

希望这是有道理的，请不要犹豫澄清。任何和所有的帮助表示赞赏。

来源

2010-07-01 OICJC

听起来像是你正在尝试做一个转变，从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>

享受！

来源

2010-07-01 21:12:18 Doug

+1使用它的设计来解决问题的技术，而不是强迫你_want_使用技术形成一个丑陋，非直观，半破解的解决方案。 – nearlymonolith 2010-07-01 21:16:47

谢谢道格。我实际上已经玩过XLST并获得了一些有希望的结果，但是没有/不知道xpath的任何信息。将检查出来。没有足够的代表或我会给你+1。 – OICJC 2010-07-01 21:50:46

@Doug：你的XSL看起来可能很熟悉我的！：/ – JohnB 2010-07-01 23:11:54

你的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>

来源

2010-07-01 22:48:42 JohnB

感谢您的回答。你的XSL看起来与@ Doug's很相似，但是两个几乎相同的答案让我觉得他们都是钱。 – OICJC 2010-07-02 05:19:43

哈哈这可能与JohnB坐在我旁边的事实有关;） – Doug 2010-07-02 15:27:00

这里的另一个版。我觉得它更清洁的，如果你：

avoid <xsl:for-each/>（使用XSLT的模式，而不是匹配是更地道）
使用属性值模板（这些是attribute="{..}"）
你也应该设置<xsl:output/>因为你生成HTML（我假设4.0）

我认为你可以输入你的<page/>元素添加一个额外的属性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>

来源

2010-07-02 01:46:35 porges

感谢Porges的回答。我也会尝试这个版本。 – OICJC 2010-07-02 05:18:07

这是如何得到改造用PHP来完成：

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

来源

2010-07-02 11:03:56 Andreas

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

回答

相关问题