欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端 读取XML文件

程序员文章站 2024-03-14 21:55:53
...

Jquery读取下xml文件。

代码如下：

html内容

<!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>
    <title></title>
      <script type="text/javascript"  src="jquery-1.11.0.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 += "<h3>年级：" + arrGrade[i] + "</h3>";
                            $strUser.each(function () {
                                strHTML += "姓名：" + $(this).children("name").text() + "<br>";
                                strHTML += "性别：" + $(this).children("sex").text() + "<br>";
                                strHTML += "邮箱：" + $(this).children("email").text() + "<hr>";

                            });
                        });
                        $("#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文件如***意 <?xml version="1.0" encoding="utf-8" ?>

<?xml version="1.0" encoding="utf-8" ?>
<Info>
  <User grade="980886">
    <name>龚德辉</name>
    <sex>男</sex>
    <email>aaa@qq.com</email>
  </User>

  <User grade="980886">
    <name>李建洲</name>
    <sex>女</sex>
    <email>aaa@qq.com</email>
  </User>
  <User grade="980666">
    <name>张天虎</name>
    <sex>男</sex>
    <email>aaa@qq.com</email>
  </User>

  <User grade="980666">
    <name>陈小燕</name>
    <sex>女</sex>
    <email>aaa@qq.com</email>
  </User>
</Info>

这里需要引入Jquery。

我是在本地新建了个文件夹，把这三个文件放在一起 并注意路径，在火狐上一试，也每有问题，结果我又换到谷歌，还是不行

错误：Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

结果一查可能是跨域问题，然后放到tomcat下一试 OK!!!

前端 读取XML文件

js 读取xml文件

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Hello </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

var xmlDom = loadXML("info.xml");
//获得根节点
var root=xmlDom.documentElement;
var data="";
var names=root.getElementsByTagName("name");
var ages=root.getElementsByTagName("age");
var len=names.length;
for(var i=0;i<len;i++) {
 data+="姓名:";
 data+=names[i].firstChild.nodeValue;
 data+=" 年龄:";
 data+=ages[i].firstChild.nodeValue;
 data+=" ";
}
console.log(data);



function loadXML(xmlFile){
    var xmlDoc=null;
    var agent = navigator.userAgent.toLowerCase();
 
    //判断浏览器的类型
    //支持IE浏览器
    if(agent.indexOf("msie") > 0){
    	alert("22");
        var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
        for(var i=0;i<xmlDomVersions.length;i++){
            try{
                xmlDoc = new ActiveXObject(xmlDomVersions[i]);
                break;
            }catch(e){
            }
        }
    }
    //支持firefox浏览器
     else if(agent.indexOf("firefox") > 0){
        try{
            xmlDoc = document.implementation.createDocument('','',null);
        }catch(e){
        }
    } else{//谷歌浏览器
    	alert("111111111");
    	var oXmlHttp = new XMLHttpRequest() ;
        oXmlHttp.open( "GET", xmlFile, false ) ;
        oXmlHttp.send(null) ; 
        return oXmlHttp.responseXML;
    }
     if(xmlDoc!=null){
        xmlDoc.async = false;
        xmlDoc.load(xmlFile);
    } 
    return xmlDoc;
}
</SCRIPT>
</BODY>
</HTML>

xml文件

<?xml version="1.0" encoding="utf-8"?>
<RECORDS>
 <RECORD id="1">
	<name>ceun</name>
	<age>21</age>
 </RECORD>
 <RECORD id="2">
	<name>midou</name>
	<age>22</age>
 </RECORD>
 <RECORD id="3">
	<name>jake</name>
	<age>23</age>
 </RECORD>
 <RECORD id="4">
	<name>hello</name>
	<age>20</age>
 </RECORD>
 <RECORD id="5">
	<name>Paul</name>
	<age>25</age>
 </RECORD>
</RECORDS>

这样直接在文件夹测试 火狐没有问题，谷歌也是报错，刚开始以为是浏览器得问题，一直找兼容问题，结果找了好多解决方案，还是不行，然后把他同样放到tomcat下就 ok了！！！

 

相关标签： XML读取

上一篇： Leetcode初学——整数反转

下一篇： Leetcode初学——编辑距离

推荐阅读