jquery解析xml

更多时间：2014-8-3 类别：Web前端浏览量：673

jquery解析xml

jquery解析xml

一、jquery解析xml步骤

1、获取XML

JScript 代码复制


$(document).ready(function() ...{
    $.ajax(...{
        url: '/xml/books。xml',
        type: 'GET',
        dataType: 'xml',
        timeout: 1000,  //设定超时
        cache: false,   //禁用缓存
        error: function(xml) ...{
            alert("加载XML文档出错!");
        },
        success: GetStudentComplete   //设置成功后回调函数
    });
});

2、解析XML

JScript 代码复制


//获取XML成功后回调函数
function GetStudentComplete(xml) ...{
    $(xml).find("student").each(function(i) ...{     //查找所有student节点并遍历
        var id = $(this).children("id");          //获得子节点
        var id_vaule = id.text();                 //获取节点文本
        var email_vaule = $(this).attr("email");  //获取节点的属性
        alert(id_vaule);
        alert(email_vaule);
    });
}

二、jquery解析xml完整实例

1、xml文件结构:books。xml

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>

2、页面代码

HTML 代码复制


<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.7.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>";
            });
            $('#myli').html(s);
        });
    });
</script>
</head>
<body>
    <li id='myli'></li>
</body>
</html>

3、效果图

标签：jquery xml

上一篇：js判断是否为手机访问

下一篇：Extjs中文乱码

您可能感兴趣

jquery解析xml

jquery解析xml

热门推荐

排行榜