如何从html中的xml文件生成数据

时间：2015-04-18 21:11:59

标签： xml http xslt

我以前从未做过xml，但是我在json中创建了一些有效的东西，但我的导师希望在xml中看到同样的东西。

这就是我所拥有的。

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<root>
   <element>
      <boxclass>fancybox</boxclass>
      <folder>nu_images</folder>
      <pic>gd_42.jpg</pic>
      <tfolder>nu_images/th/</tfolder>
      <thumbpic>th_gd_42.jpg</thumbpic>
      <title>Rand Poster 1</title>
      <url>http://galnova.com/</url>
   </element>
   <element>
      <boxclass>fancybox</boxclass>
      <folder>nu_images</folder>
      <pic>gd_13.jpg</pic>
      <tfolder>nu_images/th/</tfolder>
      <thumbpic>th_gd_13.jpg</thumbpic>
      <title>Explosive Pixel Design</title>
      <url>http://galnova.com/</url>
   </element>
   <element>
      <boxclass>fancybox</boxclass>
      <folder>nu_images</folder>
      <pic>hubris.jpg</pic>
      <tfolder>nu_images</tfolder>
      <thumbpic>hubris_thumb.jpg</thumbpic>
      <title>Hiding Hubris</title>
      <url>http://galnova.com/</url>
   </element>
   <element>
      <boxclass>fancybox</boxclass>
      <folder>pro_images</folder>
      <pic>m_gcj.jpg</pic>
      <tfolder>pro_images/_th/</tfolder>
      <thumbpic>th_m_gcj.jpg</thumbpic>
      <title>Global Comic Jam Mockup</title>
      <url>http://galnova.com/</url>
   </element>
   <element>
      <boxclass>fancybox</boxclass>
      <folder>A14</folder>
      <pic>fir.jpg</pic>
      <tfolder>A14</tfolder>
      <thumbpic>fir_thumb.jpg</thumbpic>
      <title>Fir-God of Fire</title>
      <url>http://galnova.com/</url>
   </element>
   <element>
      <boxclass>fancybox</boxclass>
      <folder>nu_images</folder>
      <pic>gd_37.jpg</pic>
      <tfolder>nu_images/th/</tfolder>
      <thumbpic>th_gd_37.jpg</thumbpic>
      <title>MoTown Winter Blast Logo</title>
      <url>http://galnova.com/</url>
   </element>
   <element>
      <boxclass>fancybox</boxclass>
      <folder>nu_images</folder>
      <pic>tking.jpg</pic>
      <tfolder>nu_images</tfolder>
      <thumbpic>tking_thumb.jpg</thumbpic>
      <title>Ticking Time Bomb</title>
      <url>http://galnova.com/</url>
   </element>
   <element>
      <boxclass>fancybox</boxclass>
      <folder>pro_images</folder>
      <pic>m_sin.jpg</pic>
      <tfolder>pro_images/_th/</tfolder>
      <thumbpic>th_m_sin.jpg</thumbpic>
      <title>Sins Mockup</title>
      <url>http://galnova.com/</url>
   </element>
   <element>
      <boxclass>fancybox</boxclass>
      <folder>nu_images</folder>
      <pic>gd_25.png</pic>
      <tfolder>nu_images/th/</tfolder>
      <thumbpic>th_gd_25.jpg</thumbpic>
      <title>Ground Zero Logo</title>
      <url>http://galnova.com/</url>
   </element>
   <element>
      <boxclass>fancybox</boxclass>
      <folder>nu_images</folder>
      <pic>gd_43.jpg</pic>
      <tfolder>nu_images/th/</tfolder>
      <thumbpic>th_gd_43.jpg</thumbpic>
      <title>Rand Poster 2</title>
      <url>http://galnova.com/</url>
   </element>
</root>

这是我的html页面结构。我试图在html页面中使用xslt来生成数据，但它正在破坏，我不知道为什么。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.galnova.com/2015/xml/index.xml">
<xsl:template match="/">

<head>
<meta charset="utf-8">
<title>KEITH JETER XML SAMPLE</title>

</head>

<body>
<header></header>
<div class="bg_bottom_stretch">
    <div class="bg_top_center">
        <div class="evertin">
        <h2>QUICK GALLERY</h2>
            <div id="gallery">

            <xsl:for-each select="root/element">

            <a class="<xsl:value-of select="boxclass"/>" rel="gallery1" href="<xsl:value-of select="url"/><xsl:value-of select="folder"/>/<xsl:value-of select="pic"/>" title="<xsl:value-of select="title"/>"><img src="<xsl:value-of select="url"/><xsl:value-of select="tfolder"/>/<xsl:value-of select="thumbpic"/>" border="0" alt="<xsl:value-of select="title"/>" title="<xsl:value-of select="title"/>"></a>         
            </xsl:for-each>           
            </div>
        </div>
    </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js" type="text/javascript"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
<link href="2015/css/g15.css" rel="stylesheet" />

</body>
</html>
</xsl:template>
</xsl:stylesheet>

任何有关此的帮助将不胜感激。我觉得我错过了这一步的几个步骤。

2 个答案:

答案 0 :(得分：1)

您当前的XSLT存在多个问题：缺少开始<html>标记，并且<meta>和<img>标记未关闭。此外，<a>和<img>代码的以下评估不起作用：

<a class="<xsl:value-of select="boxclass"/>" 
 rel="gallery1" href="<xsl:value-of select="url"/><xsl:value-of select="folder"/>/
 <xsl:value-of select="pic"/>" title="<xsl:value-of select="title"/>">
 <img src="<xsl:value-of select="url"/><xsl:value-of select="tfolder"/>/
 <xsl:value-of select="thumbpic"/>" border="0" alt="<xsl:value-of select="title"/>" 
 title="<xsl:value-of select="title"/>">
</a>

就像class的示例一样：您可以像这样评估boxclass的值：

<a class="{boxclass}">

并获取href的值，将url，folder和pic的值连接起来，如下所示：

href="{concat(url,folder,'/',pic)}"

完整调整后的XSLT：

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes" encoding="UTF-8" indent="yes" />
  <xsl:template match="/">
    <html>
      <head>
        <meta charset="utf-8"/>
        <title>KEITH JETER XML SAMPLE</title>
      </head>
      <body>
        <header></header>
        <div class="bg_bottom_stretch">
          <div class="bg_top_center">
            <div class="evertin">
              <h2>QUICK GALLERY</h2>
              <div id="gallery">
                <xsl:for-each select="root/element">
                 <a class="{boxclass}" rel="gallery1" href="{concat(url,folder,'/',pic)}" title="{title}">
                   <img src="{concat(url,folder,'/',thumbpic)}" border="0" alt="{title}" title="{title}"/>
                 </a>         
                </xsl:for-each>           
              </div>
            </div>
          </div>
        </div>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js" type="text/javascript"></script>
        <link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
        <link href="2015/css/g15.css" rel="stylesheet" />
      </body>
    </html>
  </xsl:template>
</xsl:transform>

请注意，这是使用外部Saxon XSLT-Processor的版本 - 保存的演示版here。但是，如果您只是使用本演示中提供的模板替换当前XSLT的模板，并根据以下有关如何使其在本地工作的说明调整XML和XSLT，它应该可以工作。

作为示例如何将其调整为在浏览器本地工作，请按如下方式调整XML：

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="xtest.xslt"?>
<root>
....

其中xtest.xslt是XSLT文件的名称，XSLT的开头是这样的：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
....

并将其保存在XML文件旁边。用例如打开XML时Firefox，XLST将应用于XML文件，结果显示为输出。

更新：正如评论中所建议的，我建议只使用jQuery解析XML，因为使用此方法更简单，您的要求只是使用XML而不是JSON。我刚刚调整了你的javascript来解析像这样的JSON来处理XML。由于您只使用一个XML文件，我只调用函数loadXml()而没有任何参数并加载XML - input.xml - 我的测试目的就是在此函数的HTML文件旁边。因此，必须根据您的设置调整url的值。 我没有使用for循环遍历所有JSON元素，而只是将所有element个节点存储在gal

中 
gal = $xml.find('element')

使用jQuery each()

迭代所有这些元素 
$(gal).each(function() { ... }

在那里，调整str以获取XML中的值：

str += "<a class=\"" + $(this).find("boxclass").text() + "\" ....

完成jQuery： 

<script type="text/javascript">
function loadXml() {
  $.ajax({
    type: "GET",
    url: 'input.xml',
    dataType: "xml",
    success: function (xml) { parseXml(xml); }
  });
}

function parseXml(xml) {
  var $xml = $(xml),
      gal = $xml.find('element'),
      str = "";

  $(gal).each(function() {
    str += "<a class=\"" + $(this).find("boxclass").text() + "\" rel=\"gallery1\" href=\"" + $(this).find("url").text() + $(this).find("url").text() + "\/" + $(this).find("pic").text() + "\"" + "title=\"" + $(this).find("title").text() + "\">" + "<img src=\"" + $(this).find("url").text() + $(this).find("tfolder").text() + "\/" + $(this).find("thumbpic").text() + "\"" + "border=\"0\"" + "alt=\"" + $(this).find("title").text() + "\"" + "title=\"" + $(this).find("title").text() + "\"\/>" + "</a>";
  });

   $("#gallery").html(str);
}

$(document).ready(function () {
  loadXml();
});
</script>

答案 1 :(得分：0)

您的错误正在发生，因为您只能有一条定义行（第一行）您有两条定义行。下面是序列化数据然后反序列化数据的示例代码。删除一个。

＆＃13;
＆＃13; 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Xml;
using System.Xml.Serialization;
using System.IO;

namespace ConsoleApplication1
{
    class Program
    {
        const string FILENAME = @"c:\temp\test.xml";
        static void Main(string[] args)
        {
            Root root = new Root() {
                elements = new List<Element>() {
                    new Element(){
                        boxclass = "fancybox",
                        folder = "nu_images",
                        pic = "gd_42.jpg",
                        tfolder = "nu_images",
                        thumpic = "th_gd_42.jpg",
                        title = "Rand Poster 1",
                        url = "http://galnova.com"
                    },
                    new Element(){
                        boxclass = "fancybox",
                        folder = "nu_images",
                        pic = "gd_13.jpg",
                        tfolder = "nu_images",
                        thumpic = "th_gd_13.jpg",
                        title = "Explosive Pixel Design",
                        url = "http://galnova.com"
                    },
                    new Element(){
                        boxclass = "fancybox",
                        folder = "nu_images",
                        pic = "hubris.jpg",
                        tfolder = "nu_images",
                        thumpic = "hubris_thumb.jpg",
                        title = "Hiding Hubris",
                        url = "http://galnova.com"
                    },
                    new Element(){
                        boxclass = "fancybox",
                        folder = "pro_images",
                        pic = "m_gcj.jpg",
                        tfolder = "pro_images/_th/",
                        thumpic = "th_m_gcj.jpg",
                        title = "Global Comic Jam Mockup",
                        url = "http://galnova.com"
                    },
                    new Element(){
                        boxclass = "fancybox",
                        folder = "A14",
                        pic = "fir.jpg",
                        tfolder = "A14",
                        thumpic = "fir_thumb.jpg",
                        title = "Fir-God of Fire",
                        url = "http://galnova.com"
                    },
                    new Element(){
                        boxclass = "fancybox",
                        folder = "nu_images",
                        pic = "gd_37.jpg",
                        tfolder = "nu_images",
                        thumpic = "th_gd_37.jpg",
                        title = "MoTown Winter Blast Logo",
                        url = "http://galnova.com"
                    },
                    new Element(){
                        boxclass = "fancybox",
                        folder = "nu_images",
                        pic = "tking.jpg",
                        tfolder = "nu_images",
                        thumpic = "tking_thumb.jpg",
                        title = "Ticking Time Bomb",
                        url = "http://galnova.com"
                    },
                    new Element(){
                        boxclass = "fancybox",
                        folder = "pro_images",
                        pic = "gd_42.jpg",
                        tfolder = "m_sin.jpg",
                        thumpic = "th_m_sin.jpg",
                        title = "Sins Mockup",
                        url = "http://galnova.com"
                    },
                    new Element(){
                        boxclass = "fancybox",
                        folder = "nu_images",
                        pic = "gd_25.jpg",
                        tfolder = "nu_images",
                        thumpic = "th_gd_25.jpg",
                        title = "Ground Zero Logo",
                        url = "http://galnova.com"
                    },
                    new Element(){
                        boxclass = "fancybox",
                        folder = "nu_images",
                        pic = "gd_43.jpg",
                        tfolder = "nu_images",
                        thumpic = "th_gd_43.jpg",
                        title = "Rand Poster 2",
                        url = "http://galnova.com"
                    }
                }
            };

            XmlSerializer serializer = new XmlSerializer(typeof(Root));

            StreamWriter writer = new StreamWriter(FILENAME);
            serializer.Serialize(writer, root);
            writer.Flush();
            writer.Close();
            writer.Dispose();

            XmlSerializer xs = new XmlSerializer(typeof(Root ));
            XmlTextReader reader = new XmlTextReader(FILENAME);
            Root readData = (Root)xs.Deserialize(reader);
        }
    }
    [XmlRoot("root")]
    public class Root
    {
        [XmlElement("element")]
        public List<Element> elements {get;set;}
    }
    [XmlRoot("element")]
    public class Element
    {
        [XmlElement("boxclass")]
        public string boxclass {get;set;}
        [XmlElement("folder")]
        public string folder {get;set;}
        [XmlElement("pic")]
        public string pic {get;set;}
        [XmlElement("tfolder")]
        public string tfolder {get;set;}
        [XmlElement("thumpic")]
        public string thumpic {get;set;}
        [XmlElement("title")]
        public string title {get;set;}
        [XmlElement("url")]
        public string url {get;set;}
    }
}
​
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题