JS 解析XML文件

最新推荐文章于 2024-05-05 09:54:19 发布

AndyO_O

最新推荐文章于 2024-05-05 09:54:19 发布

阅读量585

点赞数

分类专栏： XML 文章标签： xml jsp javascript

本文链接：https://blog.csdn.net/AndyO_O/article/details/47068737

版权

XML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、业务需求：

将少量数据（主要是字典数据）放入XML文件中，并在JSP页面中进行解析，将数据以下拉框的形式展现在页面中。

二、代码实现

1、XML文件 dropDownList.xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
	<fieldType>
		<type value = "1" >字符串</type>
		<type value = "2" >数字</type>
		<type value = "3" >日期</type>
		<type value = "4" >布尔型</type>
	</fieldType>
	<inputType>
		<type value = "1" >单选框</type>
		<type value = "2" >复选框</type>
		<type value = "3" >下拉框</type>
		<type value = "4" >文本框</type>
		<type value = "5" >文本域</type>
	</inputType>
</root>

2、JSP 文件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<section class="content-header">
	<h1>
		解析XML文件 <small>解析XML文件</small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i> home</a></li>
		<li class="active">Here</li>
	</ol>
</section>

<!-- Main content -->
<section id="" class="content">
	<div class="row">
		<div class="col-md-9">
			<div class="box box-primary">
				<div class="box-header">
					<h3 class="box-title">XML文件解析</h3>
				</div>
				<!-- /.box-header -->
				<!-- form start -->
				<div class = "box-body">
					<select name = "xmlTest" id = "xmlTest" >
						
					</select>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- /.content -->
<SCRIPT type="text/javascript">

//加载xml文档
function loadXML (xmlFile) {
     var xmlDoc = null;
     if (window.ActiveXObject) {
         xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE浏览器
         xmlDoc.async = false;
         xmlDoc.load(xmlFile);
     }else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐浏览器
         xmlDoc = document.implementation.createDocument('', '', null);
         xmlDoc.load(xmlFile);
     }else{ //谷歌浏览器
       	 var xmlhttp = new window.XMLHttpRequest();
         xmlhttp.open("GET",xmlFile,false);
         xmlhttp.send(null);
         if(xmlhttp.readyState == 4){
         	xmlDoc = xmlhttp.responseXML.documentElement;
         } 
     }
     return xmlDoc; 
 }

 // 首先对xml对象进行判断
function checkXMLDocObj (xmlFile) {
     var xmlDoc = loadXML(xmlFile);
     if (xmlDoc == null) {
         alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
     }
     return xmlDoc;
 }
 
var xmlDoc = checkXMLDocObj('dropDownList.xml');//xml文件放在同一目录下
alert(xmlDoc + "1111111111111");
var obj={};
//var arr = [];
var arr = new Array(); 
$(document).ready(function () {
   var nodes;
   if(window.ActiveXObject){
	   nodes = xmlDoc.getElementsByTagName('collage')[0].childNodes; //读取XML文件中需要显示的数据
   }else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
        nodes = xmlDoc.getElementsByTagName('fieldType')[0].children; //读取XML文件中需要显示的数据
   }else{
		nodes = xmlDoc.getElementsByTagName('fieldType');
   }
   alert(nodes.length);
   for (var j = 0; j < nodes.length; j++) {
       var resource = nodes[j];
       var value = resource.getAttribute('value');
       var name = resource.getText();
       $("#xmlTest").append('<option value = '+value+'>'+name+'</option>');
   }
});

</SCRIPT>

三、总结

A、加载XML文件，这里要区分不同的浏览器

B 、读取XML文件的数据信息

C、使用append动态拼接生成下拉选框