[JQ权威指南]JQuery读取XML数据

最新推荐文章于 2024-06-29 12:06:41 发布

厦门德仔

最新推荐文章于 2024-06-29 12:06:41 发布

阅读量4.1k

点赞数

分类专栏： # JQuery 文章标签： JQuery-XML

本文链接：https://blog.csdn.net/david_520042/article/details/52090942

版权

JQuery 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

读取XML数据对象，并以班级分组的方式将各年级的同学信息显示在页面中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
      <script type="text/javascript"  src="Jscript/jquery-1.4.2.min.js"></script>
        <style type="text/css">
           body{font-size:13px}
           .iframe{width:320px;border:solid 1px #666}
           .iframe .title{padding:5px;background-color:#eee;}
           .iframe .content{padding:8px; font-size:12px;}
           .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 arrGrade = new Array(980886, 980666);
        $(function () {
            $("#Button1").click(function () {
                var strHTML = "";
                $.ajax({
                    url: '7-6.xml',
                    dataType: '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).children("name").text() + "<br>";
                                strHTML += "性别：" + $(this).children("sex").text() + "<br>";
                                strHTML += "邮箱：" + $(this).children("email").text() + "<hr>";

                            });
                        });
                        $("#Tip").html(strHTML);
                    }
                });
            });
        }); 
    </script>
</head>
<body>
   <div class="iframe">
        <div class="title">
            <input id="Button1" type="button" class="btn" value="获取数据" />
        </div>
            <div class="content">
                <div id="Tip"></div>
            </div>
    </div>
</body>
</html>

XML:

<?xml version="1.0" encoding="utf-8" ?>
<Info>
  <User grade="980886">
    <name>龚德辉</name>
    <sex>男</sex>
    <email>gongdehui@163.com</email>
  </User>

  <User grade="980886">
    <name>李建洲</name>
    <sex>女</sex>
    <email>xiaoli@163.com</email>
  </User>
  <User grade="980666">
    <name>张天虎</name>
    <sex>男</sex>
    <email>zhantianhu@163.com</email>
  </User>

  <User grade="980666">
    <name>陈小燕</name>
    <sex>女</sex>
    <email>chenxiaoyan@163.com</email>
  </User>
</Info>