本文介绍了使用jquery / javascript将XML转换为HTML的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 我有一些 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 : NoAre you looking to Invest in the next 6 months : MaybeWhat Investments are you interested in : Carbon Credits,Green InvestmentsHow much are you looking to invest : £50,000 - £100,000Is 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 xmlYour 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 ajaxI 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 xmlYou 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 dataNow 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 usevar 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>') ; });ConclusionjQuery 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!