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

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

javascript jquery html xml ajax

Javascript 将特定的XML节点拉入HTML文档,javascript,jquery,html,xml,ajax,Javascript,Jquery,Html,Xml,Ajax,第一次海报。请温柔一点这个话题可能类似于其他几个问题，但就我所见，这是我试图解决的一个独特问题。FWIW，我主要是一名设计师；我对Flash、HTML和CSS很危险，但对其他东西却有点不知所措。通过四处搜索，我似乎正在寻找ajax/jquery解决方案，我需要一些帮助首先，我构建了一个相当复杂的Flash界面，它从格式良好且经过验证的XML文件中提取内容。这部分完成了，效果很好但是，客户端希望为没有Flash的观众创建一个简单（r）javsScript版本的界面。而且，他们希望这个版本能够

第一次海报。请温柔一点

这个话题可能类似于其他几个问题，但就我所见，这是我试图解决的一个独特问题。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>

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


第一节
这是对第一节的描述。
第二节
这是对第二节的描述。

我想这样创建HTML：

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

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


[来自第一个XML节点的值]
[来自第一个XML节点的值]
节点图像属性]“/>
[第二个XML节点的值]
[第二个XML节点的值]
节点图像属性]“/>

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

希望这是有道理的，请不要犹豫澄清。非常感谢您的帮助。

听起来您正在尝试从XML到HTML的转换。为此，您可以使用一种称为XSLT的技术，但许多人通常称之为XSLT。您可以将xslt与xml查询语言（query language for xml）结合使用，以准确地完成您在问题中描述的内容

以下是xml：（将div id添加到xml中）


第一节
这是对第一节的描述。
第二节
这是对第二节的描述。

以下是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>

以下是运行Transform后的输出：

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


第一节
这是对第一节的描述
第二节
这是对第二节的描述

享受吧

将XML更改为以下格式（设置div id名称）：


绿色背景
第一节
这是对第一节的描述。
蓝背景
第二节
这是对第二节的描述。

此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>

这是另一个版本。如果您：

（使用XSLT的模式匹配更为惯用）
使用属性值模板（这些是
```
属性=“{..}”
```
）
您还应该设置
，因为您正在生成HTML（我假设为4.0）

我假设您可以在输入中的

元素上添加一个额外的属性

id

（否则就无法从中获取

id

）

以下是如何使用PHP完成转换：

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

+1感谢您使用旨在解决问题的技术，而不是强迫您想使用的技术来设计一个丑陋、不直观、半途而废的解决方案。谢谢Doug。实际上，我已经使用了XLST并获得了一些有希望的结果，但对xpath一无所知。我去看看。没有足够的代表，否则我会给你+1。@Doug:你的XSL对我来说非常熟悉！：/@道格-非常感谢你的帮助。在您的答案和下面的其他答案（它们非常相似，告诉我这是正确的方法！）之间，我用XSL文件获得了漂亮的XML格式。我唯一缺少的部分是如何使用重叠的div脚本将经过XLS转换的XML带到我的HTML页面中。也许这应该是一个单独的问题？你能澄清你正在经历的问题吗？听起来您正在进行xsl转换并生成html-您是否在页面之外进行转换？你使用的是什么技术——纯html、php、asp、asp.NET。答案是，Porges。我也会试试这个版本。谢谢你的回答。您的XSL看起来确实与上面的@Doug非常相似，但两个几乎相同的答案让我觉得它们都是关于钱的。哈哈，这可能与JohnB在办公室坐在我旁边有关；）

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