jQuery、JS读取xml文件里的内容（JS先通过document.implementation.createDocument方法将xml转换成document对象，jQuery将读取到的xml转成table）

xml文件：test.xml

<?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文件：

1.先通过document.implementation.createDocument方法将xml转换成document对象

2.在通过js获取document中的元素并其值

<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>  
=====================JS读取xml文件，并且转成table表格展示==================

JS读取XML文件数据并以table显示数据(兼容IE火狐)

先看xml文件：

<?xml version="1.0" standalone="yes"?>
<student>
  <stuinfo>
    <stuName>张秋丽</stuName>
    <stuSex>女   </stuSex>
    <stuAge>18</stuAge>
  </stuinfo>
  <stuinfo>
    <stuName>李文才</stuName>
    <stuSex>男   </stuSex>
    <stuAge>31</stuAge>
  </stuinfo>
  <stuinfo>
    <stuName>李斯文</stuName>
    <stuSex>男   </stuSex>
    <stuAge>22</stuAge>
  </stuinfo>
  <stuinfo>
    <stuName>马英</stuName>
    <stuSex>女   </stuSex>
    <stuAge>25</stuAge>
  </stuinfo>
  <stuinfo>
    <stuName>孙红雷</stuName>
    <stuSex>男   </stuSex>
    <stuAge>32</stuAge>
  </stuinfo>
  <stuinfo>
    <stuName>欧阳俊雄</stuName>
    <stuSex>男   </stuSex>
    <stuAge>28</stuAge>
  </stuinfo>
  <stuinfo>
    <stuName>江琳</stuName>
    <stuSex>女   </stuSex>
    <stuAge>23</stuAge>
  </stuinfo>
  <stuinfo>
    <stuName>小小</stuName>
    <stuSex>女   </stuSex>
    <stuAge>22</stuAge>
  </stuinfo>
</student>

aspx页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="获取数据库数据生成XML.aspx.cs" Inherits="Chapter1.获取数据库数据生成XML" %>

<!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 runat="server">
    <title></title>
    <script type="text/javascript">
        function loadXMLDoc(dname) {
            if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
            }
            else {
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET", dname, false);
            xhttp.send("");
            return xhttp.responseXML;
        }
        function ReadXml() {
            var xmldoc = loadXMLDoc("Student.xml");
            //获得指定节点
            var divmsg = document.getElementById("xmlMsg");
            var msg = "<table border='1' id='mytable'><tr><th>姓名</th><th>性别</th><th>年龄</th><tr>";
            var nodes = xmldoc.getElementsByTagName("stuinfo");
            for (var i = 0; i < nodes.length; i++) {
                msg += "<tr>";
                msg += "<td>" + nodes[i].getElementsByTagName("stuName")[0].firstChild.nodeValue + "</td>";
                msg += "<td>" + nodes[i].getElementsByTagName("stuSex")[0].firstChild.nodeValue + "</td>";
                msg += "<td>" + nodes[i].getElementsByTagName("stuAge")[0].firstChild.nodeValue + "</td>";
                msg += "</tr>";
            }
            msg += "</table>";
            divmsg.innerHTML = msg;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="JS读取XML" onclick="ReadXml()" /><br />
        <div id="xmlMsg">
        </div>
    </div>
    </form>
</body>
</html>

上面的JS操作主要就避免了使用childNodes(因为火狐中有时候会出现childNodes[0]获取到的是"\n"而不是我们想要的第一个子节点，这个自己可以去试下，反正我是遇到了这种情况),使得可以兼容IE、火狐，其他浏览器我没试。




===========jQuery将读到的xml文件转成了table表格展示========================

地址：https://zhidao.baidu.com/question/581652437.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<title>qqqun21/777/12</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<script src="jquery-1.8.0.js" type="text/javascript"></script>

<script>

window.onload = function(){

$("div").load("x.xml",function(response,status,xhr){

if(status=="success"){

$("div").html("<table border=1></table>");

$(response).find("TestCase").each(function(){

var name = $(this).children("Name").text();

var testTime = $(this).children("TestTime").text();

var result = $(this).children("Result").text();

var co = result=="False"?"red":"#fff";

var html = "<tr style=

'Courier New", monospace; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; margin: 0px !important; padding: 0px !important; color: rgb(0, 0, 0) !important;">><

td>"+name

+"</td><td>"+testTime+"</td><td>"+result+"</td></tr>";

$("table").append(html);

});

}else{

$("div").html("error occured:"+xhr.status+" "+xhr.statusText);

}

})

};

</script>

</head>

<body>

<div></div>

</body>

posted @ 2019-12-02 10:14 双间阅读(1499) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

双间

jQuery、JS读取xml文件里的内容（JS先通过document.implementation.createDocument方法将xml转换成document对象，jQuery将读取到的xml转成table）

公告