jQuery读取XML数据（jQuery调用JSON数据学习第七天）

       在jQuery中，除了之前解析XML文件中的数据外，还可以对获取的XML数据进行分组或遍历，实现的方法也十分简单，下面通过一个示例进行演示。

（1）功能描述

       在页面中，用户单击“获取数据”按钮时，将打开指定的XML文件获取相应的数据对象，并以年班分组的方式将各年级的同学信息显示在页面中。

（2）实现代码

    主体代码：

<script  src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>

<style type="text/css">
    body{font-size:13px}
    h3{padding:0px;margin:8px 0px}
    .iframe{width:260px;border:solid 1px #666}
    .iframe .title{padding:5px;background-color:#eee}
    .iframe .content{padding:8px;font-size:112px}
    .btn{border:#666 1px solid;padding:2px;width:80px;
    filter:progid:DXImageTransform.Microsoft
    .Gradient(GradientType=0,StartColorStr=#ffffff,
    EndColorStr=#ECE9D8);}           
</style>

<script type="text/javascript">
    var aeeGrade = new Array(980886,980666);
    $(function(){
        $("#Button1").click(function(){    //按钮单击事件
            var strHTML = ""；              //初始化保存内容变量
            $.ajax({
                url:'Xml',
                success:function(data){
                    $.each(arrGrade,function(i){
                        var $strUser = $(data).find("User[grade=" + arrGrade[i] + "]");
                        strHTML += "<h3>年级：" + arrGrade[i] + "</h3>";
                        $strUser.each(function(){
                         strHTML += "姓名:" + $(this).childdren("name").text() + "<br>";
                         strHTML += "性别:" + $(this).childdren("sex").text() + "<br>";
                         strHTML += "邮箱:" + $(this).childdren("email").text() + "<hr>";
                        });
                    });
                    //显示处理后的数据
                    $("#Tip").html(strHTML);
                }
            });
        });
    });
</script>

<div class="iframe">
    <div class="title">
        <input id="Button1" type="button" class="btn" value="获取数据" />
    </div>
    <div class="content">
        <div id="Tip"></div>
    </div>
</div>

       xml文件

<?xml version="1.0" encoding="utf-8" ?>
<Info>
    <User grade="980886">
        <name>tgr</name>
        <sex>男</sex>
        <email>tao_guo_rong@163.com</email>
    </User>
    <User grade="980886">
        <name>ljz</name>
        <sex>女</sex>
        <email>xiaoli@163.com</email>
    </User>
    <User grade="980666">
        <name>zth</name>
        <sex>男</sex>
        <email>tianhu@163.com</email>
    </User>
    <User grade="980666">
        <name>zxy</name>
        <sex>女</sex>
        <email>xiaoyan@163.com</email>
    </User>
</Info>

（4）代码分析

       在这个例子中，为了实现分组显示列表数据的功能，分别两次调用了jQuery框架中的$.each函数。第一次用于遍历年级数组，在遍历过程中，根据获取的各个年级数组编号，通过find()方法寻找与编号相对应的学生数据信息，并对该获取的信息进行第二次遍历；在这次遍历过程中，分别通过单个遍历元素调用children(),text()方法，获取各标签结点中的内容值，并将这些值以叠加的形式保存在变量中，再通过指定的元素将变量的内容显示在页面。在第二次遍历过程中，$(this)表示遍历时的当前元素自身，详细见代码中的加粗部分。