jquery解析xml

更多的項目都是在解析json，今天臨時讓解析幾個xml文件，其實都同樣，總結一下吧。

例如咱們有這樣一個xml文件

<?xml version="1.0" encoding="utf-8" ?>
<fields>
  <field Name="Name1">
    <fieldname>dsname</fieldname>
    <datatype>字符</datatype>
  </field>
  <field Name="Name2">
    <fieldname>dstype</fieldname>
    <datatype>字符</datatype>
  </field>
</fields>

該文件名稱咱們命名爲data.xml

首先咱們要獲取xml

$.get("data.xml",function(xml){    
      
});

而後再 進行解析配置：例如這樣：

$(xml).find("field").each(function() {
    var field = $(this);
    var fName = field.attr("Name");//讀取節點屬性
    var dataType = field.find("datatype").text();//讀取子節點的值
});

接下來就是進行渲染到html上了。

    <div id="div">
        <ul>
        </ul>
    </div>

渲染效果就是這樣：

 $("#div").find('ul').append('<li><a href="'+links+'">'+titles+'</a></li>');

 

---

 

完整代碼：

html：

 <div id="div">
　　<ul></ul>
 </div>

javascript:

$(xml).find("field").each(function() {
    var field = $(this);
    var fName = field.attr("Name");//讀取節點屬性
    var dataType = field.find("datatype").text();//讀取子節點的值

 $("#div").find('ul').append('<li><a href="'+links+'">'+titles+'</a></li>');

});