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

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



<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 += "

年级:" + arrGrade[i] + "

"
; $strUser.each(function () { strHTML += "姓名:" + $(this).children("name").text() + "
"
; strHTML += "性别:" + $(this).children("sex").text() + "
"
; strHTML += "邮箱:" + $(this).children("email").text() + "
"
; }); }); $("#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:


<Info>
  <User grade="980886">
    <name>龚德辉name>
    <sex>sex>
    <email>[email protected]email>
  User>

  <User grade="980886">
    <name>李建洲name>
    <sex>sex>
    <email>[email protected]email>
  User>
  <User grade="980666">
    <name>张天虎name>
    <sex>sex>
    <email>[email protected]email>
  User>

  <User grade="980666">
    <name>陈小燕name>
    <sex>sex>
    <email>[email protected]email>
  User>
Info>

[JQ权威指南]JQuery读取XML数据_第1张图片

你可能感兴趣的:(前端设计,JQuery)