[转]jQuery 读取 xml-优快云博客

本文介绍了一个使用jQuery解析XML文件的示例，并展示了如何将XML数据转换为HTML列表。示例包括了通过Ajax请求获取XML文件，使用jQuery处理XML中的数据，并将其显示在网页上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XML 文件内容：

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

html 文件内容：

<!DOCTYPE html>
<html>
<head>
    <title> jQuery 解析 XML </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery.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>

        $.ajax({
            url: "xml/menu.xml",
            dataType: 'xml',
            type: 'GET',
            timeout: 2000,
            cache: false,
            error: function(xml) {
                alert("加载菜单时出错！");
            },
            success: function(xml) {
                //建立一个代码片段
                var frag = $("<ul/>");

                //遍历所有student节点
                $(xml).find("Root>Node:parent").each(function(i) {
                    //获取student下的email属性。
                    var text = $(this).attr("Text"),
                        href = $(this).attr("NavigateUrl"),
                        key  = $(this).attr("KeyIndex");

                    //构造HTML字符串，通过append方法添加进之前建立代码片段
                    frag.append("<li>" + text +"_"+href+ "_"+key+ "</li>");
                });

                //最后得到的frag添加进HTML文档中
                frag.appendTo("#load");
            }
        });