Extraction de noeud (s) XML spécifique (s) dans le document HTML

affiche pour la première fois. Soyez gentil s'il vous plait.Extraction de noeud (s) XML spécifique (s) dans le document HTML

Ce sujet peut être similaire à plusieurs autres questions, mais pour autant que je puisse voir c'est un problème unique que j'essaie de résoudre. FWIW, je suis avant tout un designer; Je suis dangereux avec Flash et HTML et CSS, mais un peu dans les mauvaises herbes avec tout le reste. De chercher autour, je semble se diriger vers une solution ajax/jquery, avec laquelle j'ai besoin d'aide. Pour commencer, j'ai construit une interface Flash assez complexe qui extrait le contenu d'un fichier XML bien formé et validé. Cette partie est faite, fonctionne magnifiquement.

Cependant, le client souhaite créer une version (r) javsScript simple de l'interface à mettre en place pour les utilisateurs qui n'ont pas Flash. ET, ils aimeraient que cette version tire des valeurs (texte) à partir du même fichier XML, donc ils ont seulement besoin de modifier le fichier pour apporter des modifications.

Cela ressemble à une requête raisonnable, mais l'exécuter ne semble pas si simple. Le plus gros obstacle est que je ne veux pas boucler le XML pour la sortie - je veux appeler des valeurs de nœuds spécifiques dans des éléments spécifiques.

Voici un exemple aussi simple que possible. De XML comme ceci:

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

Je veux créer HTML comme ceci:

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

La clé est que chaque div a un autre identifiant, pour chaque page 'avoir des couleurs uniques de fond et le formatage. L'idée est alors que j'utiliserais un simple script div superposé pour montrer/cacher chacune de ces 'sections' dans la même empreinte.

J'espère que cela a du sens, n'hésitez pas à nous éclairer. Toute aide est appréciée.

Source

2010-07-01 OICJC

On dirait que vous essayez de faire une transformation du XML au HTML. Pour cela, vous pouvez utiliser une technologie appelée XSLT mais communément connue par beaucoup comme un xslt transformation. Vous pouvez utiliser xslt conjointement avec xpath (langage de requête pour xml) pour faire exactement ce que vous décrivez dans votre question.

Voici le xml: (a ajouté le div id au 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>

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

est ici la sortie après avoir exécuté la Tranform:

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

Amusez-vous!

Source

2010-07-01 21:12:18 Doug

+1 pour l'utilisation de la technologie qui a été conçu pour résoudre le problème, au lieu de forcer la technologie que vous veux, pour utiliser pour créer une solution laide, non intuitive, à moitié cassée. – nearlymonolith

Merci Doug. En fait, j'avais déjà joué avec XLST et obtenu des résultats prometteurs, mais je ne savais rien de xpath. Je vais vérifier. N'avez pas assez de rep ou je vous donnerais +1. – OICJC

@Doug: votre XSL ressemble puissamment à la mienne! :/ – JohnB

Changer votre XML à ce (pour définir les noms de 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>

Ce XSL traduira votre XML juste la façon dont vous avez demandé:

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

Source

2010-07-01 22:48:42 JohnB

Merci d'avoir répondu. Votre XSL ressemble remarquablement à @ Doug, ci-dessus, mais deux réponses presque identiques me font penser qu'ils sont tous les deux sur l'argent. – OICJC

Ha Ha ça a peut-être quelque chose à voir avec le fait que JohnB est assis à côté de moi au bureau;) – Doug

Voici une autre version.Je trouve beaucoup plus propre si vous:

avoid <xsl:for-each/> (en utilisant le modèle de XSLT correspondant à la place est plus idiomatiques)
modèles de valeur d'attribut d'utilisation (ce sont les attribute="{..}")
vous devez également définir <xsl:output/> puisque vous êtes la génération HTML (je suppose 4,0)

Je suppose que vous pouvez ajouter un attribut id supplémentaire sur vos <page/> éléments dans l'entrée (sinon il n'y a nulle part pour obtenir votre!de)

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

Source

2010-07-02 01:46:35 porges

Merci pour la réponse, Porges. Je vais essayer cette version aussi. – OICJC

Voici comment obtenir la transformation effectuée avec PHP:

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

Source

2010-07-02 11:03:56 Andreas

Extraction de noeud (s) XML spécifique (s) dans le document HTML

Répondre

Questions connexes