Html5与xml的交互实例项目——XML 数据显示为 HTML 表格

brains丶小白

已于 2022-09-01 16:58:19 修改

阅读量749

点赞数

于 2022-08-05 11:13:03 首次发布

本文链接：https://blog.csdn.net/yxd0724/article/details/126173665

版权

关键词由CSDN通过智能技术生成

此项目是简单把 XML 数据显示为 HTML 表格
XML文件格式实际上与JSON数据格式是差不多的，把XML当做JSON数据格式去理解，会使的XML文件中的数据更容易理解；

运行效果图
在这里插入图片描述
index.html代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>将xml数据渲染到html的表格中</title>
	</head>
	<body>
		<script>
			// 对浏览器版本进行兼容性判断
			if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp = new XMLHttpRequest();
			} else { // code for IE6, IE5
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			
			// open()具体可去查看  XMLHttp的open对象及属性，这里就只做我们使用了的属性介绍
			//open(请求方式（post,get,put,propfind），请求对象URL(相对路径或绝对路径)，是否为异步请求（可选，类似于loding:true, 默认值为true, ))
			xmlhttp.open("GET", "index.xml", false); 
			xmlhttp.send();
			xmlDoc = xmlhttp.responseXML;// 此时xml数据已经存入了xmlDoc中
			
			// 使用js输出html的DOM
			document.write("<table border='1'>");
			var x = xmlDoc.getElementsByTagName("item");
			// 设置表头
			document.write("<tr><th width='80'>包名</th><th width='50'>价格</th></tr>");
			// 循环表格
			for (i = 0; i < x.length; i++) {
				document.write("<tr><td>");
				// 这边的写法就自己和xml文件中的格式对比一下
				document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
				document.write("</td><td>");
				document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
				document.write("</td></tr>");
			}
			document.write("</table>");
		</script>
	</body>
</html>

index.xml代码块

<?xml version="1.0" encoding="UTF-8"?>
<commodity>
	<item>
		<name>豆沙包</name>
		<price>1.5</price>
	</item>
	<item>
		<name>老面馒头</name>
		<price>0.8</price>
	</item>
	<item>
		<name>鲜肉包</name>
		<price>2.0</price>
	</item>
</commodity>