將特定的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文檔

回答

相關問題