轻松使用jquery解析XML

xml文件结构:books.xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <book id="1">
        <name>深入浅出extjs</name>
        <author>张三</author>
        <price>88</price>
    </book>
    <book id="2">
        <name>锋利的jQuery</name>
        <author>李四</author>
        <price>99</price>
    </book>
    <book id="3">
        <name>深入浅出flex</name>
        <author>王五</author>
        <price>108</price>
    </book>
    <book id="4">
        <name>java编程思想</name>
        <author>钱七</author>
        <price>128</price>
    </book>
</root>

页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery解析xml</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.post(‘books.xml‘,function(data){
            //查找所有的book节点
            var s="";
            $(data).find(‘book‘).each(function(i){
                var id=$(this).attr(‘id‘);
                var name=$(this).children(‘name‘).text();
                var author=$(this).children(‘author‘).text();
                var price=$(this).children(‘price‘).text();
                s+=id+"&nbsp;&nbsp;&nbsp;&nbsp;"+name+"&nbsp;&nbsp;&nbsp;&nbsp;"+author+"&nbsp;&nbsp;&nbsp;&nbsp;"+price+"<br>";
            });
            $(‘#mydiv‘).html(s);
        });
    });
</script>
</head>
<body>
    <div id=‘mydiv‘></div>
</body>
</html>

效果图:
 
完整示例下载

时间: 2025-01-18 17:29:51

轻松使用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的程序例子

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

jquery解析xml

更多的项目都是在解析json,今天临时让解析几个xml文件,其实都一样,总结一下吧. 例如我们有这样一个xml文件 <?xml version="1.0" encoding="utf-8" ?> <fields> <field Name="Name1"> <fieldname>dsname</fieldname> <datatype>字符</datatype> &

IE8 jquery解析xml的兼容问题

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