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表格展示==================

先看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>
 
 

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

  1. Flex读取txt文件里的内容（二）

    Flex读取txt文件里的内容 自己主动生成的文件 LoadTxt-app.xml: <?xml version="1.0" encoding="utf-8&quo ...

  2. Flex读取txt文件里的内容（一）

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/you23hai45/article/details/25248307  Flex读取txt文件里的内 ...

  3. Flex读取txt文件里的内容报错

    Flex读取txt文件里的内容 1.详细错误例如以下 2.错误原因 读取文件不存在 var file:File = new File(File.applicationDirectory.nativeP ...

  4. 曹工说Spring Boot源码（15）-- Spring从xml文件里到底得到了什么（context：load-time-weaver 完整解析）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  5. 曹工说Spring Boot源码（16）-- Spring从xml文件里到底得到了什么（aop：config完整解析【上】）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  6. 曹工说Spring Boot源码（17）-- Spring从xml文件里到底得到了什么（aop：config完整解析【中】）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  7. Flex读取txt文件中的内容（三）

    Flex读取txt文件中的内容 1.设计源码 LoadTxt.mxml: <?xml version="1.0" encoding="utf-8"?> ...

  8. Flex读取txt文件中的内容（二）

    Flex读取txt文件中的内容 自动生成的文件 LoadTxt-app.xml: <?xml version="1.0" encoding="utf-8" ...

  9. 不在JPA 的 persistence.xml 文件里配置Entity class的解决的方法

     在Spring 集成 Hibernate 的JPA方式中,须要在persistence配置文件里定义每个实体类.这样很地不方便.2种方法能够解决此问题: 这2种方式都能够实现不用在persist ...

随机推荐

  1. 求第n个质数

    输入一个不超过 10000 的正整数 n,求第n个质数 样例输入 10 样例输出 29 题目地址 #include<stdio.h> #include<math.h> int ...

  2. HCL 试验1

    PC端配置:配置ip地址 交换机配置:①创建VLAN system-view vlan 10 vlan 20 ②配置PC端接口 interface gi 1/0/1 port link-type ac ...

  3. 论文翻译：HetConv-Heterogeneous Kernel-Based Convolutions for Deep CNNs

    Abstract 我们提出了一种新颖的深度学习架构,其中卷积操作利用了异构内核.与标准卷积运算相比,所提出的HetConv(基于异构内核的卷积)减少了计算(FLOPs)和参数的数量,同时仍保持表示效率 ...

  4. Splunk初识

    目录 网址汇总 注册与下载 安装 使用 中文环境 关于APP Splunk自带的APP 创建自己的APP 添加数据 本地文件添加 通过监视添加数据 自定义列 查询语句 SPL 与 SQL对照 命令查找 ...

  5. python selenium中Excel数据维护(二)

    接着python里面的xlrd模块详解(一)中我们我们来举一个实例: 我们来举一个从Excel中读取账号和密码的例子并调用: ♦1.制作Excel我们要对以上输入的用户名和密码进行参数化,使得这些数据 ...

  6. MySQL -1- 简介及安装

    第一章 MySQL 大纲介绍 1.官方定义的MySQL DBA工作内容 (1)运维DBA 初级:各版本.各平台安装搭建.升级 中级:体系结构原理.基础管理(启动关闭.初始化配置文件管理.多实例管理.用 ...

  7. Java最新学习线路（基础，源码，项目，实战）

    如需获取以下学习资源请关注公众号:Java编程指南 我们为自学者编程的或初学java的小伙伴们准备了一整套完整的学习资源和文章,还有我自己在自学路上的一些总结和学习线路,希望能帮到小伙伴们,如果有什么 ...

  8. 2018icpc宁夏邀请赛网络赛_G_Trouble of Tyrant

    题意 一列\(n\)个点,给定一个特殊的图,有两种边\(E(1,i)\)和\(E(i-1,i)\),多个询问,每次给一个\(d\),求所有路径长度加上\(d\)后1到\(n\)的最短路. 分析 首先这 ...

  9. 090、ELK完成部署和使用 （2019-05-13 周二）

    参考https://www.cnblogs.com/CloudMan6/p/7787870.html   上节我们已经部署了容器化的ELK,本节我们学习如何将日志导入ELK并进行图形化展示.   几乎 ...

  10. luogu P1758 [NOI2009]管道取珠

    luogu 这个题中的平方有点东西,考虑他的组合意义,也就是做这个过程两次,如果两次得到的结果一样就给答案+1,所以可以考虑dp,设\(f_{i,j,k,l}\)表示第一个过程中上面取到的第\(i\) ...