jquery读取xml文件示例

最新推荐文章于 2023-06-21 21:05:49 发布

最新推荐文章于 2023-06-21 21:05:49 发布 · 143 阅读

文章标签：

#XML #jQuery #Ajax #Java #XHTML #ViewUI

Javasript/Ajax学习专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery库从XML文件中提取学生信息的方法，并将这些信息动态地展示在网页上。通过AJAX请求加载XML数据，利用jQuery强大的DOM操作能力实现了对学生ID和邮箱地址的有效提取。


<?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>
            list
        </name>
        <id>
            2
        </id>
    </student>
</stulist>



<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style>
            * {
                margin: 0;
                padding: 0
            }

            body {
                font-size: 12px;
                line-height: 160%;
                color: #666;
                font-family: Tahoma, Arial, Helvetica, sans-serif;
            }
        </style>
        <script type="text/javascript" src="js/jquery.js">
        </script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'test.xml',
                    dataType: 'xml',
                    type: 'GET',
                    timeout: 1000,
                    error: function(xml){
                        alert("loading xml error");
                    },
                    success: function(xml){
                        $(xml).find("student").each(function(i){
                            var oId = $(this).children("id");
                            //获取id节点的文本值；
                            var IdValue = oId.text();
                            console.log(IdValue);
                            var oEmail = $(this).attr('email');
                            console.log(oEmail);
                            $("<li></li>").html(IdValue).appendTo("ol");
                            $("<li></li>").html(oEmail).appendTo("ol");
                        })
                    }
                });

            })
        </script>
    </head>
    <body>
        <ol>
        </ol>
    </body>
</html>