js解析xml

weixin_30681121

于 2019-04-24 10:22:00 发布

阅读量56

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jentary/p/10760871.html

版权

<?xml version="1.0"?>  
  
<note>  
<to>George</to>  
<from>John</from>  
<heading>Reminder</heading>  
<body>Don't forget the meeting!</body>  
<lastname>Simth</lastname>  
  
</note>

<html>  
  
<head>  
  
    <script type="text/javascript">  
      
        function parseXML(){  
              
            try{  
                  
                xmlDoc= new ActiveXObject("Microsoft.XMLDOM");  
            }catch(e){  
                  
                try{  
                      
                    xmlDoc= document.implementation.createDocument("","",null);  
                }catch(e){  
                      
                    alert(e.message);  
                    return;  
                }  
            }  
            xmlDoc.async = false;  
            xmlDoc.load("../xml/test.xml");  
              
            document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;  
            document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;  
            document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;  
        }  
    </script>  
</head>  
<body onload="parseXML()">  
  
    <h1>W3School.com.cn Internal Note</h1>  
    <p><b>To:</b><span id="to"></span><br/>  
    <b>From:</b><span id="from"></span><br/>  
    <b>Message:</b><span id="message"></span>  
    <p>  
      
      
</body>  
  
</html>

jquery 解析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>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    </head>
    <body>
        <input type="button" id="getXml" value="获取和解析xml"/>
        <div id="load"></div>
    </body>
    
    <script type="text/javascript">
        $(function(){
            $("#getXml").click(function(){
                $.ajax({
                    type:"get",
                    url:"file/test.xml",//这里通过设置url属性来获取xml
                    dataType:"xml",
                    timeout:1000,      //设定超时
                    cache:false,       //禁用缓存
                    success:function(xml){//这里是解析xml
                        var frag = $("<ul/>");      //建立一个代码片段
                        $(xml).find("student").each(function(i){
                            var id = $(this).children("id");   //获取id节点
                            id_value = id.text();              //获取节点文本
                            email = $(this).attr("email");     //获取student下的email属性
                            //构造html字符串，通过append()方法添加到之前建立的代码段
                            frag.append("<li>姓名："+id_value+"---邮箱："+email+"</li>");
                        });
                        frag.appendTo("#load");
                    }
                });
            })
        })
    </script>
</html>

转载于:https://www.cnblogs.com/jentary/p/10760871.html

weixin_30681121

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js解析xml

<?xml version="1.0"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meetin...
复制链接

扫一扫

js解析xml

“相关推荐”对你有帮助么？