使用jquery/javascript将XML转换为HTML

我有一些XML需要在div中显示为文本.
我们可以将此XML转换为如下格式.

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

输出应如下所示：

你以前投资过吗：没有
您是否希望在未来6个月投资：也许吧
您对哪些投资感兴趣：碳信用额,绿色投资
您希望投资多少：50,000英镑 – 100,000英镑

这可能是使用Jquery / javascript.??

它应该像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</span></li>
      <li class="link-pad"><a href="index.html" class="requirements">
     Change  your requirements</a></li>
    </ul>
<div class="clear"></div>
 </div>
  </div>

解决方法

第1步：验证您的xml

你的xml无效.您可以检查它是否有效,例如,在online validator中.它们有很多,我链接的这个只是一个例子.

对于这个答案我会说我们有一些xml如下

<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</value>
  </field>
</root>

Step2：获取xml,也许通过ajax

我认为这是显而易见的,但无论如何我会包括在这里.

$.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
  })
;

第3步：解析xml

您可以使用jQuery的$.parseXML来解析它并将原始数据转换为XML文档

$.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!');
  })
;

第4步：玩数据

现在我们有一个xml文档可供使用.以下片段假设我们有一个定义列表,< dl>标记,在我们的HTML布局中,并且在解析数据之后被执行,就像在上一步中一样.

// 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>')
    ;
  })
;

结论

jQuery是你想要使用的.它的可连接性使得像切黄油一样横穿DOM.我希望这个答案对你有用.

作为附加参考,请参阅full example on jsfiddle

原文地址：https://www.jb51.cc/jquery/181434.html

使用jquery/javascript将XML转换为HTML

解决方法

相关推荐