JQuery加载并解析XML实例(用ajax函数读取并解析xml)

最新推荐文章于 2021-08-06 02:29:39 发布

苍羽

最新推荐文章于 2021-08-06 02:29:39 发布

阅读量467

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

下面的是html文件的代码：

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>new document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="generator" content="editplus" />
 <script type="text/javascript" src="../scripts/jquery-1.3.1.js"></script>
 <script type="text/javascript">
  $(function() {
   $("button").click(function(){
    $.ajax({
     url: 'ajax.xml',
     type: 'GET',
     dataType: 'xml',
     timeout: 1000,
     cache:false,
     error: function(xml){
      alert('加载XML文档出错');
     },
     success: function(xml){
      //建立一个代码片段
      var frag=$("<ul/>");
      //遍历所有student节点
      $(xml).find("student").each(function(i){
       //获取id节点
       var id=$(this).children("id"),
       //获取节点文本
        id_value=id.text(),
       //获取student下的email属性。
        email=$(this).attr("email");
       //构造HTML字符串，通过append方法添加进之前建立代码片段
       frag.append("<li>"+id_value+"-"+email+"</li>");
      });
      //最后得到的frag添加进HTML文档中
      frag.appendTo("#load");
     }
    });
   });
  });
 </script>
</head>
<body>
<button>加载</button>
<div id="load"></div>
</body>
</html>

与上面的html同级目录下的ajax.xml文件的代码：

<?xml version="1.0" encoding="UTF-8"?>
<stulist>
        <student email="shihuan@163.com"> 
                <name>zhangsan</name>
                <id>1</id>
        </student>
        <student email=abcdef@163.com>
               <name>lisi</name>
               <id>2</id>
        </student>
</stulist>

转自：