Извлечь определенные XML-узлы в HTML-документ - PullRequest
Новая
       2

Извлечь определенные XML-узлы в HTML-документ

3 голосов
/ 02 июля 2010

первый постер.Пожалуйста, будьте осторожны.

Эта тема может быть похожа на несколько других вопросов, но, насколько я понимаю, это уникальная проблема, которую я пытаюсь решить.FWIW, я в первую очередь дизайнер;Я опасен с Flash и HTML и CSS, но немного в замешательстве со всем остальным.Из поисков вокруг я, похоже, направляюсь к решению ajax / jquery, с которым мне нужна помощь.

Для начала я создал довольно сложный интерфейс Flash, который извлекает контент из правильно сформированного и проверенногоXML-файлЭта часть сделана, прекрасно работает.

Однако клиент хочет создать простую (r) версию интерфейса javsScript, которая будет доступна для зрителей, у которых нет Flash.И, они хотели бы, чтобы эта версия извлекала значения (текст) из ТОГО ЖЕ 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 есть свой собственный идентификатор, чтобы каждая «страница» моглаиметь уникальные цвета фона и форматирования.Идея заключается в том, что я использовал бы простой перекрывающийся скрипт div, чтобы показать / скрыть каждый из этих «разделов» в пределах одного и того же элемента.

Надеюсь, это имеет смысл, пожалуйста, не стесняйтесь для разъяснений.Любая помощь приветствуется.

Ответы [ 4 ]

7 голосов
/ 02 июля 2010

Похоже, вы пытаетесь сделать преобразование из XML в HTML.Для этого вы можете использовать технологию под названием XSLT, но широко известную многим как xslt преобразование .Вы можете использовать xslt в сочетании с xpath (язык запросов для xml), чтобы делать в точности то, что вы описываете в своем вопросе.

Вот этот xml: (добавлен идентификатор div в 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>

Наслаждайтесь!

5 голосов
/ 02 июля 2010

Вот еще одна версия. Я нахожу это намного чище, если вы:

  • избегать <xsl:for-each/> (использование сопоставления с шаблоном XSLT вместо этого более идиоматично)
  • использовать шаблоны значений атрибутов (это attribute="{..}")
  • Вы также должны установить <xsl:output/>, поскольку вы генерируете HTML (я предположил, что 4.0)

Полагаю, вы можете добавить дополнительный атрибут id к вашим <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>
1 голос
/ 02 июля 2010

Вот как выполнить преобразование с помощью PHP: 

$proc=new XsltProcessor;  
$proc->importStylesheet(DOMDocument::load("stylesheet.xsl"));  
echo $proc->transformToXML(DOMDocument::load("data.xml"));
1 голос
/ 02 июля 2010

Измените свой XML на этот (чтобы установить имена идентификаторов div): 

<?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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...