jquery解析xml

Posted 2020-08-19 xiuber

更多的项目都是在解析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>‘);

});