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>‘);
});
时间: 2024-10-13 00:06:45

jquery解析xml的相关文章

JQuery 解析xml

JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml. JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历

使用Jquery解析xml的两种方法

第一种方案(最稳妥): 先将String格式的xml转换为xml对象,然后再用Jquery解析xml对象 1 var returnDataXml = parseXML(returnData); 2 var param = $(returnDataXml).find("param"); 3 for(i=0;i<param .length;i++){ 4 var paramName = $(param[i]).attr("name"); 5 var rDescri

几个JQuery解析XML的程序例子

用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案:偃师市一中 <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://www.nowamagic.net/cgi/test.xml', dataType: 'xml', success: fun

160928、JQuery解析XML数据的demo

用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 方案1 当后台返回的数据类型是xml对象,如下: 那么,前端jquery解析: 就会得到"成功!"这个文字信息. 方案2 当你要解析一个xml文件对象时候,如xmlfile.xml: $.get("xmlfile.xml",function(xml){ $(xml).find("item"

轻松使用jquery解析XML

xml文件结构:books.xml <?xml version="1.0" encoding="UTF-8"?><root>    <book id="1">        <name>深入浅出extjs</name>        <author>张三</author>        <price>88</price>    </b

收藏几个JQuery解析XML的程序例子

用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script type="text/javascript"> 博e百娱乐城$(document).ready(function() { $.ajax({ url: 'http://www.nowamagic.net/cgi/test.xml', dataType: 'xml', success: fu

Jquery 解析xml字符串

来源:http://guolingfa.cn/Article/Details/5d81dbbdc4474b80be0e764942bc2223 解析方式一: $(function(){ var str="<xml><result><NewDataSet><Table><UserName>test1</UserName></Table><Table><UserName>test2</U

jquery解析XML文件实现的省市联动

XML我是直接在网上下载的文件包 拿过来用的 jquery我用的是3.1的 前台页面 1 <form action="buy.html" method="get"> 2 <div> 3 <table> 4 <tr> 5 <td colspan="2" align="center">送货地址确认</td> 6 </tr> 7 <tr>

IE8 jquery解析xml的兼容问题

正常情况下可以这么写: jQuery(node).find(xpath.replace("//", ""))[0]; 但是在IE8下得到的是undefined应该要这么写: var xmlDoc = jQuery.parseXML(node);jQuery(xmlDoc).find(xpath.replace("//", ""))[0];