使用jquery / javascript将XML转换为HTML [英] Convert XML to HTML using jquery/javascript
问题描述
我有一些 XML ，我需要在 div 中显示为文本。
我们可以将这个 XML 转换为如下格式。
<根>
< field>
< label>您之前投资过< / label>
<值>无< /值>
< / field>
< field>
< label>您是否在未来6个月投资< / label>
<值>可能< /值>
< / field>
< field>
< label>您对哪些投资感兴趣< / label>
<值>碳信用，绿色投资< /值>
< / field>
< field>
< label>您希望投资多少钱< / label>
<值> 50,000 - £100,000< /值>
< / field>
< / root>
输出应如下所示：
您之前是否投资过：否
您是否希望在未来6个月投资：也许
是
你对什么投资感兴趣：碳信用额度，绿色投资< >
您希望投资多少钱：£50,000 - £100,000
这可能使用Jquery / javascript。??
它应该像下面的HTML一样呈现。
< div class =的如何做>
< div class =how-text>
< h3>您的要求< / h3>
< ul class =requirements>
< li>< label class =field-l>您之前投资过：< / label> <跨度>否LT; /跨度>< /锂>
< li>< label class =field-l>您是否希望在未来6个月投资：
< / label> <跨度>也许< /跨度>< /锂>
< li>< label class =field-l>您对什么投资感兴趣：< / label>
< span>碳信用，绿色投资< / span>< / li>
< li>< label class =field-l>您希望投资多少钱：< / label>
< span>£50,000 - £100,000< / span>< / li>
< li class =link-pad>< a href =index.htmlclass =requirements>
更改您的要求< / a>< / li>
< / ul>
< div class =clear>< / div>
< / div>
< / div>
第1步：验证您的xml
您的xml无效。您可以检查它是否有效，例如，在在线验证器中。有很多，我链接的这个只是一个例子。
对于这个答案，我会拿到一些xml，如下所示：
< root>
< field>
< label>您之前投资过< / label>
<值>无< /值>
< / field>
< field>
< label>您是否在未来6个月投资< / label>
<值>可能< /值>
< / field>
< field>
< label>您对哪些投资感兴趣< / label>
<值>碳信用，绿色投资< /值>
< / field>
< field>
< label>您希望投资多少钱< / label>
<值> 50,000 - £100,000< /值>
< / field>
< / root>
第二步：获取xml，也许通过ajax
$。get（ '/ url_of_the_xml_resource'）
.done（function（data）{
//如果请求成功，则执行此函数
}）
.fail（function（）{
//如果请求失败，则执行此函数
}）
;
步骤3：解析xml
您可以使用jQuery的 $ .parseXML 来解析它并将原始数据转换为XML文档。
$。get（'/ url_of_the_xml_resource'）
.done（function（data）{
//解析xml
data = $ .parseXML（data）;
//
//根据解析的数据做任何事情
}）
.fail （function（）{
alert（'something went wrong！'）;
}）
;
第四步：玩数据
现在我们有一个xml文档可以使用。下面的snipnet假设我们在我们的HTML布局中有一个定义列表< dl> tag，并且在解析数据之后立即执行，就像之前步骤。
$ b
//首先我们查询HTML文档以获取列表元素
//并存储它以备后用
var list = $（'dl'）;
// data现在是一个xml文档，所以我们查询它...
$（data）
//搜索所有< field>元素
.find（'field'）
//现在我们可以使用每个< field>
.each（function（index，element）{
//例如我们查询和存储字段
var field = $（element）
//获取值想要
var label = field.find（'label'）.text（）
var value = field.find（'value'）.text（）
//并附加一些html我们先前存储的< dl>元素
list
.append（'< dt> + label +'：< / dt>'）
.append（'< dd> '+ value +'< / dd>'）
;
}）
;
$ b $ h $> http://jquery.com/\"> jQuery 是你想要使用的。它的可链式性使横切DOM像切割黄油。我希望这个答案对你有用。
作为附加参考，请参阅完整示例在jsfiddle
I've some XML which i need to show in a div as text.
Can we convert this XML to format like below.
<root>
<field>
<label>Have you invested before</label>
<value>No</value>
</field>
<field>
<label>Are you looking to invest in the next 6 months</label>
<value>Maybe</value>
</field>
<field>
<label>What investments are you interested in</label>
<value>Carbon Credits, Green Investments</value>
</field>
<field>
<label>How much are you looking to invest</label>
<value>£50,000 - £100,000</value>
</field>
</root>
Output should be like as below:
Have you invested before : No
Are you looking to Invest in the next 6 months : Maybe
What Investments are you interested in : Carbon Credits,Green Investments
How much are you looking to invest : £50,000 - £100,000
Is this possible using Jquery/javascript.??
And it should be rendering like below HTML.
<div class="how-to">
<div class="how-text">
<h3>Your Requirements</h3>
<ul class="requirements">
<li><label class="field-l">Have you invested before:</label> <span>No</span></li>
<li><label class="field-l">Are you looking to Invest in the next 6 months:
</label> <span>Maybe</span></li>
<li><label class="field-l">What Investments are you interested in:</label>
<span>Carbon Credits,Green Investments</span></li>
<li><label class="field-l">How much are you looking to invest:</label>
<span>£50,000 - £100,000</span></li>
<li class="link-pad"><a href="index.html" class="requirements">
Change your requirements</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
解决方案 Step 1: validate your xml
Your xml is not valid. You can check it it's valid or not, for example, in an online validator. There are lots of them, this one i linked is only an example.
For this answer i will suposse we have some xml as follows
<root>
<field>
<label>Have you invested before</label>
<value>No</value>
</field>
<field>
<label>Are you looking to invest in the next 6 months</label>
<value>Maybe</value>
</field>
<field>
<label>What investments are you interested in</label>
<value>Carbon Credits, Green Investments</value>
</field>
<field>
<label>How much are you looking to invest</label>
<value>£50,000 - £100,000</value>
</field>
</root>
Step2: get the xml, maybe through ajax
I suposse this is obvious but i will include here anyway.
$.get('/url_of_the_xml_resource')
.done(function(data){
// this function is executed if the request was sucessfull
})
.fail(function(){
// this function is executed if the request fails
})
;
Step 3: parse the xml
You can use jQuery's $.parseXML to parse it and convert the raw data into a XML document
$.get('/url_of_the_xml_resource')
.done(function(data){
// parse the xml
data = $.parseXML(data);
//
// do anything you want with the parsed data
})
.fail(function(){
alert('something went wrong!');
})
;
Step 4: play with the data
Now we have a xml document to play with. The following snipnet assumes we have a definition list, <dl> tag, in our HTML layout, and is supossed to be executed after the data is parsed, like in the previous step.
// first we query the HTML document to get the list element
// and store it for later use
var list = $('dl');
// data is a xml document now, so we query it...
$(data)
// and search for all <field> elements
.find('field')
// now we can play with each <field>
.each(function(index, element){
// as example we query & store the field
var field = $(element)
// get the values we want
var label = field.find('label').text()
var value = field.find('value').text()
// and append some html in the <dl> element we stored previously
list
.append('<dt>'+label+': </dt>')
.append('<dd>'+value+'</dd>')
;
})
;
Conclusion
jQuery is what you want to use. It's chainable nature makes transversing the DOM like cutting butter. I hope this answer to be useful for you.
As aditional reference, see the full example on jsfiddle
这篇关于使用jquery / javascript将XML转换为HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
