如何从html中的xml文件生成数据 [英] how do I generate data from an xml file in html
问题描述
我以前从未做过xml，但是我在json中创建了一些有效的东西，但是我的导师希望在xml中看到相同的东西。
I have never done xml before but I created something in json that works but my instructor wants to see the same thing in 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来生成数据，但它正在破坏，我不知道为什么。
This is my structure of the html page. I tried to use xslt in the html page to generate the data but it is breaking and I don't know why.
<?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>
如有任何帮助，我们将不胜感激。我觉得我错过了这一步的几个步骤。
Any help with this will be appreciated. I feel like I am missing a few steps on this one.
推荐答案
您当前的XSLT存在几个问题：开场< html> 标记丢失且< meta> 和< img> 标签未关闭。此外，对< a> 和< img> 标记的以下评估将不起作用：
There are several issues with your current XSLT: the opening <html> tag is missing and the <meta> and <img> tags are not closing. In addition, the following evaluation for the <a> and <img> tags won't work:
<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>
就像类的例子一样：你可以像这样评估 boxclass 的值：
Just as example for the class: you can evaluate the value of the boxclass just like this:
<a class="{boxclass}">
以及获取 href的值 concatenate url ，文件夹和 pic 的值如下：
and for getting the value for href concatenate the values of url, folder and pic as follows:
href="{concat(url,folder,'/',pic)}"
完整调整后的XSLT：
The complete adjusted 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的版本 - 保存的演示版这里。但是，如果您只是使用本演示中提供的模板替换当前XSLT的模板，并根据以下有关如何使其在本地工作的说明调整XML和XSLT，它应该可以工作。
Note that this is a version using an external Saxon XSLT-Processor - saved demo version here. But it should work if you just replace the templates of your current XSLT with the templates provided in this demo and adjust both XML and XSLT according to below explanation on how to get it working locally.
作为示例如何调整此项以在浏览器本地工作，请按如下方式调整XML：
As example how to adjust this to work locally with a browser, adjust the XML as follows:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="xtest.xslt"?>
<root>
....
其中xtest.xslt是XSLT文件的名称，并且像这样的XSLT的开头：
where xtest.xslt is the name of the XSLT file, and the beginning of the XSLT like this:
<?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文件，结果显示为输出。
and save it next to the XML-file. When you open the XML with e.g. Firefox, the XLST will be applied to the XML file and the result displayed as output.
更新：正如评论中所建议的那样，我建议只是为了使用jQuery解析XML，因为使用这种方法更简单，你的要求只是使用XML而不是JSON。我刚刚调整了你的javascript来解析像这样的JSON来处理XML。由于您只使用一个XML文件，我只需调用函数 loadXml（）而不使用任何参数并加载XML - input.xml - 我的测试目的就在这个函数的HTML文件旁边。因此，必须根据您的设置调整 url 的值。
而不是使用 for 循环迭代所有JSON元素，我只是在<元素节点code> gal
Update: As suggested in the comment, I recommend just to parse the XML using jQuery as using this approach is simpler and your requirement is just to use an XML instead of JSON. I've just adjusted your javascript that parses the JSON like this to work with XML. As you're only using one XML file, I just call the function loadXml() without any parameter and load the XML - input.xml - which for my testing purposes is just next to the HTML file in this function. So the value of url has to be adjusted for your settings.
Instead of iterating over all JSON elements using a for loop, I just store all element nodes in gal
gal = $xml.find('element')
并使用jQuery迭代所有这些元素 each（）
and iterate over all these elements using jQuery each()
$(gal).each(function() { ... }
在那里，调整 str 以获取XML中的值：
There, the str is adjusted to get the values from the 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>
这篇关于如何从html中的xml文件生成数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
